补充几点:
1.自定义属性可以不用挂载到,vue实例下面,(因为你等会还要挂载到,VueRouter 实例下面)
2.二级路由的路劲可以简写的哈,简写也要注意 不能在login 路由地下挂载一个 zc路由的二级栏目(如果在login路由地下挂载,zc路由,一定不能简写,必须把路劲写全)
<!-- //引入 js文件 -->
<script type='text/javascript' src='js/vue.js'></script>
<script src="./js/vue-router_3.0.2.js"></script>
<div id='app'>
<!-- 创建路由链接文件 -->
<router-link to="/login">登录</router-link>
<router-link to="/zc">注册</router-link>
<!-- 创建路由填坑文件 -->
<router-view></router-view>
</div>
<script type='text/javascript'>
// 自定义组件 可以不添加到vue实例中
var login = {
//在login 路由下面挂载的二级路由
template: `<div>我是登录
<router-link to="/login/ll">ll</router-link>
<router-link to="/zc/ls">ls</router-link>
<router-view></router-view>
</div>`
}
var zc = {
template: `<div>我是注册</div>`
}
var ll = {
template: `<h1>ll</h1>`
}
var ls = {
template: `<h1>ls</h1>`
}
//创建 vue-router实例
const router = new VueRouter({
routes: [{
path: '/login',
component: login
}, {
path: '/zc',
component: zc
}, ]
children: [{
path: '/login/ll',
component: ll
}, {
path: '/zc/ls',
component: ls
}]
});
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
},
//可以不夸张vue实例中
components: {
login,
zc,
ll,
ls
},
//把return挂载到bue实例下
router
});
</script>
发表评论