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 编程式导航和几种路由
