Vue路由

一、动态路由

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是我们访问该组件时通过路由传递的参数两者不一样,该方式要通过路由的path来访问， 通过？发送参数 如上标红

4.this.$router.go(-2) 页面路由向后退两步

四、我们还可以通过命名路由访问组件：

<router-link :to="{name:'Cart',params:{postId:345}}">通过路由名称跳转到购物车页面</router-link>

其中name值为路由里对应的name值，params为动态路由需要传递的参数

五、router的mode有两种类型

1.hash 路径需要加#

2.history 路径不需要加#