Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 -?Vue-route?編程式導航和幾種路由
?
目錄
編程式導航?
詳情組件
創建組件
設置路由
電影列表
傳參
另一種方式
動態路由
命名路由
別名
總結
編程式導航?
點擊電影列表 跳轉電影詳情
詳情組件
創建組件
在views中創建DetailView.vue組件頁面。
示例如下：
設置路由
在router/index.js中引入詳情頁面并設置詳情路由。
示例如下：
import Detail from '@/views/DetailView'Vue.use(VueRouter) // 注冊路由插件// 配置表
const routes = [{path: '/films',name: 'films',component: Films,children: [{path: '/films/nowplaying',component: NowPlaying},{path: '/films/comingsoon',component: ComingSoon},{path: '/films',redirect: '/films/nowplaying'}]},{path: '/detail',name: 'detail',component: Detail},?
電影列表
在films/NowPlaying.vue頁面渲染電影列表。
示例如下：
<template><div>nowplaying<ul><li v-for="data in datalist" :key="data"><router-link to="/detail">{{data}}</router-link></li></ul></div>
</template>
<script>
export default {data () {return {datalist: ['春眠不覺曉', '處處聞啼鳥', '夜來風雨聲', '花落知多少']}}
}
</script>傳參
設置跳轉，使用編程式導航。
示例如下：
<template><div>nowplaying<ul><!-- <li v-for="data in datalist" :key="data"><router-link to="/detail">{{data}}</router-link></li> --><li v-for="data in datalist" :key="data" @click="handleChangePage()">{{data}}</li></ul></div>
</template>
<script>
export default {data () {return {datalist: ['春眠不覺曉', '處處聞啼鳥', '夜來風雨聲', '花落知多少']}},methods: {handleChangePage () {// 編程式導航location.href = '#/detail'}}
}
</script>另一種方式
另一種方式實現跳轉。示例如下：
methods: {handleChangePage () {// 編程式導航// location.href = '#/detail'this.$router.push('/detail')}}?
動態路由
列表項有很多，但詳情只有一個，需要根據選擇id，渲染相應詳情。
所以需要傳遞相應id，故在連接中增加id參數。
示例如下：
<template><div>nowplaying<ul><!-- <li v-for="data in datalist" :key="data"><router-link to="/detail">{{data}}</router-link></li> --><li v-for="data in datalist" :key="data" @click="handleChangePage(data)">{{data}}</li></ul></div>
</template>
<script>
export default {data () {return {datalist: ['春眠不覺曉', '處處聞啼鳥', '夜來風雨聲', '花落知多少']}},methods: {handleChangePage (id) {// 編程式導航// location.href = '#/detail'this.$router.push(`/detail/${id}`)}}
}
</script>?
動態路由配置
在router/index.js中修改原有的詳情路由。
示例如下：
{path: '/detail/:myid', // 動態路由name: 'detail',component: Detail}接收參數
在詳情組件內獲取參數。
通過生命周期中的created函數在組件創建時獲取參數。
示例如下：
控制臺查看打印結果
?
修改獲取參數
示例如下：
<script>export default {created () {// 當前匹配的路由console.log('created', this.$route.params.myid)// axios 利用 id發請求到詳情接口，獲取詳情數據，布局頁面}
}
</script>?
命名路由
對路由進行命名，就可以通過命名路由直接跳轉。
{path: '/detail/:id', // 動態路由name: 'detail', // 命名路由component: Detail},命名路由跳轉
// 1 通過路徑跳轉this.$router.push(`/detail/${id}`)// 2 通過命名路由跳轉this.$router.push({name: 'detail',params: {id}})別名
路由a別名是b，當用戶訪問b時，URL會保持為b，但是路由匹配則為a，
就像用戶訪問a一樣。
路由配置，示例如下：
{path: '/cinemas',name: 'cinemas',alias: '/ci',component: Cinemas}“別名”的功能讓你可以自由地將UI結構映射到任意的URL，
而不是受限于配置的嵌套路由結構。
總結
Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 -?Vue-route?編程式導航和幾種路由
