动态路由匹配
实际项目开发时，经常需要把匹配某种模式的路由映射到同一个组件，例如有一个 news 新闻组件，对于所有 id 各不同的新闻，都使用这个组件来渲染，这可以使用路由中国的动态段来实现。动态段使用冒号":" 标记，如/news/:id，即/news/1、/news/2 都会映射到相同的路由，当匹配到一个路由是，动态段的值将被保存到 this.$route;params*(this.$route 当前路由对象)中，可以在组件内使用
代码演示：
app.vue 代码
<template> <div id="app"> <router-link to="/news/1">新闻1</router-link> <router-link to="/news/2">新闻2</router-link> <router-view></router-view> </div></template><script>export default { name: 'App', data() { return { } }}</script>
复制代码
<router-link to="/news/1"></router-link> router-link相当于<a>标签，会渲染出 <a>标签，to="/news/1"链接地址
news.vue 代码
<template> <div> 新闻id：{{this.$route.params.id}} </div></template><script>export default {}</script>
复制代码
在 router 目录下得 index.js 导入 news 组件和添加动态路径的路由配置
index.js 代码
import Vue from 'vue'import VueRouter from 'vue-router'import News from '../views/News' Vue.use(VueRouter) const routes = [ { path: '/news/:id', component: News } ]
复制代码
importVueRouterfrom'vue-router'：导入 router 路由importNewsfrom'../views/News'：导入 News.vue 组件Vue.use(VueRouter)：实例 router 路由path:'/news/:id',：动态路径component:News:实例 News 组件
查询参数
url 中带有查询参数的形式为/news/?id=1，这样的传统的 web 应用程序中很常见，根据查询参数向服务端请求数据。在单页应用程序开发中，也支持路径中的查询参数
代码演示：
app.vue 代码
<template> <div id="app"> <router-link to="/news/?id=1">新闻1</router-link> <router-link to="/news/?id=2">新闻2</router-link> <router-view></router-view> </div></template><script>export default { name: 'App', data() { return { } }}</script>
复制代码
news.vue 代码
<template> <div> 新闻id：{{this.$route.query.id}} </div></template><script>export default {}</script>
复制代码
index.js 代码
import Vue from 'vue'import VueRouter from 'vue-router'import News from '../views/News' Vue.use(VueRouter) const routes = [ { path: '/news', component: News } ]
嵌套路由
在实际得应用场景中，一个界面 ui 通常由多层嵌套的组件合成，URL 中的各段也按某种结构对应嵌套的各层组件，
当点击‘新闻’链接是，一列表形式显示所有新闻的标题，进一步点击单个标题链接，在 news 视图中显示新闻信息，可以通过嵌套路由来实现。
代码演示：
app.vue 代码
<template> <div id="app"> <router-link to="/news">新闻</router-link> <router-view></router-view> </div></template><script>export default { name: 'App', data() { return {} }}</script><style></style>
news.vue 代码
<template> <div id="news"> <ul> <li v-for=" newa in news" :key="newa.id"> <router-link :to="'/new/' +newa.id">{{newa.title}}</router-link> </li> </ul> <router-view></router-view> </div></template><script>export default { name: 'news', data() { return { news: [ { id: 1, title: '新闻1', desc: '新闻1' }, { id: 2, title: '新闻2', desc: '新闻2' }, { id: 3, title: '新闻3', desc: '新闻3' } ] } }}</script>
new.Vue 代码
<template> <div id="new">{{$route.params.id}}</div></template><script>// import News from '@/views/News.vue'export default { name: 'new', data() { return { // news: News } }}</script>
index.js 代码
import Vue from 'vue'import VueRouter from 'vue-router'import News from '../views/News'import New from '../components/new' Vue.use(VueRouter) const routes = [{ path: '/news', component: News, children: [{ path: '/new/:id', component: New }] }]
运行结果：
网络异常，图片无法展示
|
