一、动态路由
routes: [
{
path: ‘/goods/:goodsId/user/:name‘,
name: ‘GoodsList‘,
component: GoodsList
},
]
goodsId和name是动态的，访问的时候我们必须这样输入：
http://localhost:8084/#/goods/1234/user/lvruifang
页面中我可以这样访问路由参数：
{{$route.params.goodId}} {{$route.params.name}}
二、嵌套路由：
routes: [
{
path:‘/main‘,
name:"Main",
component:Main,
children:[
{
path:‘title‘,
name:‘Title‘,
component:Title
},
{
path:‘head‘,
name:‘Head‘,
component:Head
}
]
},
]
嵌套路由通过children属性来命名子路由，其中子路由的path不可以写成‘/title’，只需要写‘title’,写了‘/’就不是上下级关系而是平级的关系了；
嵌套路由的<router-view></router-view>需要写在父级页面，也就是组件Main页面中；
router-link的写法如下：
<router-link to="/main/title">显示标题组件</router-link>一定在前面加上父级的path,也就是‘/main’
三、编程式路由
跳转路由除了<router-link to="/main/title"></router-link>的方法还可以通过js跳转路由
1.this.$router.push("/cart")
2.this.$router.push({path:‘/cart‘})
3.this.$router.push({path:‘/cart?postId=123‘})其中参数postId我们可以通过{{$route.query.postId}}来拿到这个参数
这里我们需要注意$route.params.goodId获取的是路由切换时路由的参数
而$route.query.postId是我们访问该组件时通过路由传递的参数两者不一样
4.this.$router.go(-2) 页面路由向后退两步
四、我们还可以通过命名路由访问组件：
<router-link :to="{name:‘Cart‘,params:{postId:345}}">通过路由名称跳转到购物车页面</router-link>
其中name值为路由里对应的name值，params为动态路由需要传递的参数