【vue 入坑指南 二 】vue路由（vue-router）
阿新 • • 發佈：2018-12-15
vue 筆記二 v-router構建SPA
html路由： <router-link></router-link> //相當於a標籤的作用 跳轉標籤
js路由: this.$router.push({path:''}) //js路由跳轉
html路由頁面渲染： <router-view></router-view> //跳轉完成後 渲染頁面的內容
1.動態路由匹配
不同的url引數 渲染的頁面的內容也是不同的
// 更改router的訪問地址 router/index.js import Vue from 'vue' import Router from 'vue-router' import GoodsList from './../views/GoodsList' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'GoodsList', component: GoodsList } ] })
//在router同級目錄上新建的 views/GoodsList.vue
<template>
<div>
這是一個 商品列表頁面
</div>
</template>
<script>
export default {
data () {
return{
msg:'hello vue'
}
}
}
</script>
動態路由 根據url傳值
//router/index.js import Vue from 'vue' import Router from 'vue-router' import GoodsList from './../views/GoodsList' Vue.use(Router) export default new Router({ routes: [ { path: '/goods/:GodsId/user/:UserId', name: 'GoodsList', component: GoodsList } ] })
//GoodsList.vue <template> <div> 這是一個 商品列表頁面 <p >商品的id：<span>{{$route.params.GodsId}}</span></p> <p>使用者的id：<span>{{$route.params.UserId}}</span></p> </div> </template> <script> export default { data () { return{ msg:'hello vue' } } } </script>
結果：
//在瀏覽器輸入
http://localhost:8080/#/goods/123/user/100
這是一個 商品列表頁面
商品的id：123
使用者的id：100
1.2.請求方式
1.2.1 history
訪問地址：
http://localhost:8080/goods/123/user/100
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/goods/:GodsId/user/:UserId',
name: 'GoodsList',
component: GoodsList
}
]
})
1.2.2 hash
訪問地址:
http://localhost:8080/#/goods/123/user/100/
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
Vue.use(Router)
export default new Router({
mode:'hash', //預設也是hash的模式
routes: [
{
path: '/goods/:GodsId/user/:UserId',
name: 'GoodsList',
component: GoodsList
}
]
})
2.巢狀路由
目的：在商品列表頁面中檢視商品標題與商品圖片
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
Vue.use(Router)
export default new Router({
mode:'hash',
routes: [
{
path: '/goods',
name: 'GoodsList',
component: GoodsList,
children:[ //定義子路由
{
path:"title" , //不能加 斜線，二級路由，可以簡寫，自動去查詢
name:'title',
component:Title
},
{
path:"image" , //不能加 斜線
name:'image',
component:Image
},
]
}
]
})
//在views下新建Image.vue 與 Title.vue
//Image.vue
<template>
<div>
這是商品圖片的子元件
</div>
</template>
<script>
export default {
name: "Image"
}
</script>
//Title.vue
<template>
<div>
這裡是商品標題的子元件
</div>
</template>
<script>
export default {
name: "Title"
}
</script>
在GoodsList.vue中 加入router-link 與router-view
<template>
<div>
這是一個 商品列表頁面
<!--這個地址是 絕對地址 不能簡寫，簡寫了就是一級路由-->
<router-link to="/goods/title">顯示商品標題</router-link>
<router-link to="/goods/image">顯示商品圖片</router-link>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data () {
return{
msg:'hello vue'
}
}
}
</script>
3.程式設計式路由
通過js實現路由/頁面的跳轉
$router.push("name") //跳轉方式1
$router.push({path:"name"}) //跳轉方式2
$router.push({path:"name?a=123"}) //傳參方式1
$router.push({path:"name",query:{a:123}}) //傳參方式2
$router.go(1) //跳轉下一級頁面 跳轉上一頁面:-1
//在下級頁面 可以取得引數
$router.parmas(a)
//接收問號拼接傳過來的引數
{{$route.query.a}}
//購物車頁面 js跳轉 router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Carts from '@/views/Carts'
Vue.use(Router)
export default new Router({
mode:'hash',
routes: [
{
path: '/goods',
name: 'GoodsList',
component: GoodsList,
children:[ //定義子路路
{
path:"title" , //不能加 斜線，二級路由，可以簡寫，自動去查詢
name:'title',
component:Title
},
{
path:"image" , //不能加 斜線
name:'image',
component:Image
},
]
},
{
path:'/Carts',
component:Carts,
}
]
})
在views下新建Carts.vue
<template>
<div>
這是一個 購物車頁面
<p>
商品id：{{$route.query.GoodsId}}
</p>
</div>
</template>
//在goodsList.vue中新增跳轉按鈕與事件
<template>
<div>
這是一個 商品列表頁面
<!--這個地址是絕對地址不能簡寫，簡寫了就是一級路由-->
<router-link to="/goods/title">顯示商品標題</router-link>
<router-link to="/goods/image">顯示商品圖片</router-link>
<div>
<router-view></router-view>
</div>
<button @click="jump">js跳轉到購物車頁面</button>
</div>
</template>
<script>
export default {
data () {
return{
msg:'hello vue'
}
},
methods:{
jump(){
this.$router.push('/Carts?GoodsId=100');
}
}
}
</script>
3. 命名路由
//Carts.vue
<template>
<div>
這是一個 購物車頁面
<p>
{{$route.params.CartsId}}
</p>
</div>
</template>
//GoodsList.vue
<template>
<div>
這是一個 商品列表頁面
<router-link v-bind:to="{name:'Carts',params:{CartsId:100}}">命名路由跳轉
</router-link>
</div>
</template>
//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Carts from '@/views/Carts'
Vue.use(Router)
export default new Router({
mode:'hash',
routes: [
{
path: '/goods',
name: 'GoodsList',
component: GoodsList,
},
{
path:'/Carts/:CartsId',
name:'Carts',
component:Carts,
}
]
})
4. 命名檢視(一般不會使用)
//app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<router-view name="title"></router-view>
<router-view name="image"></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Carts from '@/views/Carts'
Vue.use(Router)
export default new Router({
mode:'hash',
routes: [
{
path: '/',
name: 'GoodsList',
components:{
default:GoodsList,
title:Title,
image:Image,
}
},
]
})