持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情
动态路由匹配
实际项目开发时，经常需要把匹配某种模式的路由映射到同一个组件，例如有一个news新闻组件，对于所有id各不同的新闻，都使用这个组件来渲染，这可以使用路由中国的动态段来实现。动态段使用冒号":" 标记， 如/news/:id，即/news/1、/news/2都会映射到相同的路由，当匹配到一个路由是，动态段的值将被保存到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相当于标签，会渲染出 标签，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
}
]
import VueRouter from 'vue-router'：导入router路由import News from '../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 }]
}]
运行结果：
