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}}来接收参数

二. 路由命名