一.關于三種路由

動態路由

　就是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 部分?

這樣就會三種都顯示啦

轉載于:https://www.cnblogs.com/tansitong/p/7324267.html

總結

以上是生活随笔為你收集整理的vue 学习笔记—路由篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。