vue 学习笔记—路由篇
一.关于三种路由
动态路由
就是path:good/:ops 这种 用 $route.params接收
<router-link>是用来跳转 <router-view></router-view>用来盛放内容的容易
在routes 里面进行配置 [{ path:'',name:'',component:''}] path为router-link的路径 component为 import Img from '@/Goodlist/Img' 引入的组件名称
<router-link to="cart">跳转1</router-link> // 通过path跳转
<router-link :to="{name:cart}">跳转1</router-link> //通过name来跳转 但是to需要绑定(属性那边是个对象)
扩展 : <router-link :to="{name:'cart',params:{cartId:123}}">跳转1</router-link> 然后path里面也要配置path:'/cart/:cartId', 才能出现123 并传过去
嵌套路由
路由里面套路由
routes: [
{
/ /path: '/goods/:goos',
path:'/goods',
name: 'Goodlist',
component: Goodlist,
children:[
{
path:'title',
name:'title',
component:Tile
},{
path:'img',
name:'img',
component:Img
}
],
},{
path:'/cart/:cartId',
name:'cart',
component:Cart
}
]
编程式路由 通过js来实现页面的跳转 后面加参数 用$route.query来接收
//两种跳转方式(标签不能用 router-link 不然不显示)
//this.$router.push('cart');
//this.$router.push({path:'cart'});
// 传参
this.$router.push({path:'/cart?goodId=123'}); $route.query 接收123
this.$router.go(1); //就是history(1)
总结: 跟path后面传过的参数 {{$route.params}} 来接收参数
js控制的参数 {{$route.query.goodId}}来接收参数
二. 路由命名
js 部分
这样就会三种都显示啦