vue 学习笔记—路由篇

时间:2022-04-03 08:28:12

一.关于三种路由

动态路由

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

二. 路由命名

vue 学习笔记—路由篇

 js 部分

vue 学习笔记—路由篇

这样就会三种都显示啦