亲宝软件园·资讯

展开

VueRouter爬坑第二篇-动态路由

小土豆biubiubiu 人气:0

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  
 1 import Vue from "vue"
 2 import Router from "vue-router"
 3 Vue.use(Router)
 4 
 5 // 引入路由需要映射的组件
 6 import Index from '@/components/Index.vue'
 7 const routes = [
 8     {
 9         path: '/index',  // 具体的路由
10         component: Index //映射的目标组件
11     },
12     //新增一条动态路由
13     {
14         path: '/pageContent/:id',   // 动态路由
15     }
16 ]
17 const router = new Router({
18     routes: routes
19 })
20 
21 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还支持多段的路径参数,这里也比较简单,我们就不写实例实践了,具体的配置方法如下(来自官网截图):

 

 完结!!!!!!!

 

加载全部内容

相关教程
猜你喜欢
用户评论