您的位置:首页 > Web前端 > Vue.js

VueRouter爬坑第二篇-动态路由

2019-11-28 16:36 1551 查看

VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建。

项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送

后续VueRouter系列的文章的示例编写均基于该项目环境。

 VueRouter系列文章链接

  《VueRouter爬坑第一篇》-简单实践

  《VueRouter爬坑第二篇》-动态路由

  《VueRouter爬坑第三篇》-嵌套路由

 阅读目录

一.前言

二.动态路由配置

  1.配置动态路由

  2.配置动态路由映射到的组件

  3.编写可跳转的URL

  4.界面效果

  5.多段路径参数

一.前言

  在《VueRouter爬坑第一篇-简单实践》中,我们探究了如何从一个url路由到某个组件,我们将上一篇的路由配置代码在看一下   
// vue-router使用第一步:引入vue-router
import Vue from "vue"
import Router from "vue-router"

// vue-router使用第二步:组件注册到全局
Vue.use(Router)

// 第三步:定义路由配置
// 引入路由需要映射的组件
import Index from '@/components/Index.vue'
const routes = [
{
path: '/index',   // 匹配的URL
component: Index  //映射的目标组件
}
]

// 第四步:创建vue-router实例,传递前面定义的路由配置
const router = new Router({
routes: routes
})

// 第五步:将vue-router实例使用export导出(供其他模块使用)
export default router

  可以看到routes中配置的那一条路由path选项为'/index',那么能匹配到的url就只能是'/index',而在实际开发中的url可能会是多种多样的。

  假如我们存在一个需求:多种路由需要同时匹配到同一个组件,那么这个时候就需要动态路由来解决这个问题。

二.动态路由配置

1.配置动态路由

  动态路由的配置相对也比较简单,我们现在在router.js中添加一条动态路由的配置(为了看得清楚,我们将上一篇中写在router.js文件中的注释删掉)。 E:\MyStudy\test\VueDemo\src\router\router.js  
import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

// 引入路由需要映射的组件
import Index from '@/components/Index.vue'
const routes = [
{
path: '/index',  // 具体的路由
component: Index //映射的目标组件
},
//新增一条动态路由
{
path: '/pageContent/:id',   // 动态路由
}
]
const router = new Router({
routes: routes
})

export default router

 

  我们可以看到我们新增了一条路由配置,path设置为:'/pageContent/:id',其中冒号就表示路由中可变的部分,冒号后的id表示参数的内容。想这样的路由就可以匹配到像'pageContent/212310、'pageContent/212311'这样的url。

2.配置动态路由映射到的组件

  现在我们需要给这条动态路由配置它映射的目标组件,在这之前我们需要新建一个组件:PageContent。 E:\MyStudy\test\VueDemo\src\components\PageContent.vue
<template>
<div>
<h1>这里是PageContent组件</h1>
<h3>$routes.params = {{$route.params}}</h3>
<h3>$routes.params.id = {{$route.params.id}}</h3>
</div>
</template>
<script>
export default {
name: 'PageContent'
}
</script>

   备注:这里我们可能看到了$route.params这个写法,这块在官方文档中有介绍:动态路由设置的参数会被设置到$routes.params中。

       我们为了在PageContent中区分模板是从不同的路由渲染出来的,所以使用了$routes.params获取到了动态路由的参数并展示在模板中上。

 

   接来下给动态路由配置它映射的目标组件PageContent

E:\MyStudy\test\VueDemo\src\router\router.js 

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

// 引入路由需要映射的组件
import Index from '@/components/Index.vue'
import PageContent from '@/components/PageContent.vue'
const routes = [
{
path: '/index',  // 具体的路由
component: Index //映射的目标组件
},
//新增一条动态路由
{
path: '/pageContent/:id',   // 动态路由
component: PageContent  //动态路由映射的目标组件
}
]

const router = new Router({
routes: routes
})

export default router

3.编写可跳转的URL

  我们依旧还是在HelloWorld.vue组件中编写url,并且需要使用<router-view>告知URL的渲染位置 E:\MyStudy\test\VueDemo\src\components\PageContent.vue
<template>
<div class="hello">
<p>这里是HelloWorld组件</p>
<!-- 可跳转的URL -->
<router-link to="/index">点击这里渲染Index组件</router-link>

<router-link to="/pageContent/212310">点击这里渲染pageContent组件</router-link>
<router-link to="/pageContent/212311">点击这里也可以渲染pageContent组件</router-link>

<!-- 使用下面的这个标签可以告诉vue-router将匹配到的组件渲染到这个位置 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

 

4.界面效果

 

 

 

 

 

 

 

 

  可以看到当url为:/pageContent/212310 时,成功的匹配渲染了PageContent组件,同时从$routes.params中获取动态路由中设置的id参数值:212310;

  当url为:/pageContent/212311 时,也成功的匹配渲染了PageContent组件,同时从$routes.params中获取动态路由中设置的id参数值:212311

 5.多路径参数

  前面的实例中我们只设置了id一个参数,vue-router还支持多段的路径参数,这里也比较简单,我们就不写实例实践了,具体的配置方法如下(来自官网截图):

 

 完结!!!!!!!

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: