vue-router
vue-router基本配置
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>
<script src="./main.js"></script>
</body>
</html>
//main.js
var routes = [ //定义一个数组，数组包含基础配置信息[path,component(s)]
{
path: '/',
component: {
template: `<div>
<h1>首页</h1>
</div>`
},
}，
{
path: '/about',
component: {
template: `<div>
<h1>关于我们</h1>
</div>`
},
}，
];
var router = new VueRouter({ //创建一个VueRouter，Vuerouter中一个属性routes，用来存储路由基本信息
routes: routes,
});
var app = new Vue({
el: '#app', //Vue实例作用对象
router: router, //Vue中的一个属性，用来引用VueRouter
});
vue-router传参及获取参数
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link v-for="name in nameList" :to="'/user/' + name">{{name}}</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>
<script src="./main.js"></script>
</body>
</html>
//main.js
var routes = [ //定义一个数组，数组包含基础配置信息[path,component(s)]
{
path: '/',
component: {
template: `<div>
<h1>首页</h1>
</div>`
},
},
{
path: '/about',
component: {
template: `<div>
<h1>关于我们</h1>
</div>`
},
},
{
path: '/user/:name',
component: {
template: `<div>
<div>My name is {{$route.params.name}}.</div>
</div>`
},
},
];
var router = new VueRouter({ //创建一个VueRouter，Vuerouter中一个属性routes，用来存储路由基本信息
routes: routes,
});
var app = new Vue({
el: '#app', //Vue实例作用对象
router: router, //Vue中的一个属性，用来引用VueRouter
data: {
nameList: {
name1: 'whh',
name2: 'zqd',
name3: 'lsd',
},
},
});
vue-router子路由
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link v-for="name in nameList" :to="'/user/' + name">{{name}}</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>
<script src="./main.js"></script>
</body>
</html>
//main.js
var routes = [ //定义一个数组，数组包含基础配置信息[path,component(s)]
{
path: '/',
component: {
template: `<div>
<h1>首页</h1>
</div>`
},
},
{
path: '/about',
component: {
template: `<div>
<h1>关于我们</h1>
</div>`
},
},
{
path: '/user/:name',
component: {
template: `<div>
<div>My name is {{$route.params.name}}.</div>
</div>`
},
children: {
path: 'more',
component: {
template: {
<div>
This is {{$route.params.name}} massge
</div>
},
},
},
},
];
var router = new VueRouter({ //创建一个VueRouter，Vuerouter中一个属性routes，用来存储路由基本信息
routes: routes,
});
var app = new Vue({
el: '#app', //Vue实例作用对象
router: router, //Vue中的一个属性，用来引用VueRouter
data: {
nameList: {
name1: 'whh',
name2: 'zqd',
name3: 'lsd',
},
},
});
vue-router
0