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 部分 

这样就会三种都显示啦