vue-router 嵌套路由
2018-01-12 本文已影响96人
取个帅气的名字真好
一、基础
安装
$ npm install vue //安装vue
$ npm install vue-router //安装vue-router
或者引用<script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
我这里直接在HTML中引用script
目录
- index.html
- app.js
//index.html文件
<body>
<div id="app">
<div>
<!-- 使用 router-link 组件来导航. -->
<router-link to="/foo">首页</router-link>
<router-link to="/bar">关于</router-link>
<router-link to="/user/王玛">王玛</router-link>
<router-link to="/user/啦啦" tag="li">啦啦</router-link>
</div>
<div>
<!-- 路由出口 -->
<router-view></router-view>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="app.js"></script>
</body>
router-link ：默认会被渲染成一个 <a> 标签
to ：属性指定链接.（与path对应）
tag ：修改router-link标签
router-view ：路由渲染
- 定义（路由）组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Bar1 = { template: '<div>我叫{{$route.params.name}}</div>' }
//也可以从其他文件 import 进来
//$route.params传参+ 后面的名字name
2、定义路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '/user/:name', component: Bar1 }
// 动态路径参数 以冒号开头
]
path : 路由的地址（与to对应）
component ： 组件
- 创建 router 实例，然后传
routes配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
- 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
new Vue({
el:'#app',
router
})
二、子路由（嵌套路由）
//定义组件
const Bar1 = {
template: `
<div>
<div>我叫{{$route.params.name}}</div>
//子路由的router-link
//append 则在当前路径前添加基路(当前地址上追加一个more)
//相当于/user/:name/more
<router-link to = "more" append>更多信息</router-link>
<router-view></router-view> //子路由渲染
</div>`
}
const Bar2 = {
template: `
<div> 用户： {{$route.params.name}}
<p>{{$route.params.name}}是个好淫</p>
</div>`
}
---------------------------------------------------------
//定义路由
const routes = [{
{
path: '/user/:name', component: Bar1,
//children用于嵌套路由，可嵌套多层。
children: [{
path: 'more',
component: Bar2,
}]
}
}]
子路由.gif
本文参考官网
