嵌套路由
注意
children 中的path 不用加 "/"
这是个坑 要注意
嵌套路由主要是配置children 中的路由信息
children:[
{
path:'song',
component:Song
},
{
path:'movie',
component:Movie
},
]
在父组件中进行跳转，使用全局组件
router-link
router-view
var Home = {
template:`
<div>
首页内容
<br />
<router-link to = '/home/song'>歌曲</router-link>
<router-link to = '/home/movie'>电影</router-link>
<router-view></router-view>
</div>
`
};
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<!-- 1.先引入vue.js -->
<script type="text/javascript" src="./vue.min.js"></script>
<!-- 2.引包 引入 核心的插件vue-router -->
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 地址栏 路由范式
// （1）xxxxx.html#/user/1 params 动态路由参数
// (2) ooooo.html#/user?userId = 1 query
// Vue.use(VueRouter);
//声明组件
var Song = {
template:`<div>我是歌曲组件</div>`,
created(){
console.log(this.$router);
console.log(this.$route);
}
};
var Movie = {
template:`<div>电影组件</div>`,
created(){
console.log(this.$route);
}
};
// 3.创建路由对象
// /home/song
// /home/movie
var Home = {
template:`
<div>
首页内容
<br />
<router-link to = '/home/song'>歌曲</router-link>
<router-link to = '/home/movie'>电影</router-link>
<router-view></router-view>
</div>
`
};
var router = new VueRouter({
// 4.配置路由对象
routes:[
// 路由匹配的规则
{
//动态路由参数 以冒号开头
path:'/home',
name:'home',
component:Home,
children:[
{
path:'song',
component:Song
},
{
path:'movie',
component:Movie
},
]
}
]
});
// 抛出两个全局的组件 router-link router-view
// 抛出了两个对象 $router $route (路由信息对象)挂载到了Vue实例化对象
var App = {
template:`
<div>
<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
<router-link :to = "{name:'home'}">首页</router-link>
<!--路由组件的出口-->
<router-view></router-view>
</div>
`
}
// Cannot read property 'matched' of undefined
// 5.将配置好的路由对象关联到vue实例化对象中
new Vue({
el:'#app',
router:router,
template:`<App />`,
components:{
App
}
});
</script>
</body>
</html>
效果：
越努力越幸运
