vue-router 动态路由

上一篇文章我们已经配置好了路由，下面，来说说如何实现动态路由。

比如，我想在 news 页点击列表项，跳转到对应项，如图所示：

这里引用的数据是豆瓣电影，地址：

http://api.douban.com/v2/movie/in_theaters

eg：当我点击第一项时，跳转地址为： http://localhost:8080/#/content/26752088

第二项时，跳转地址为：http://localhost:8080/#/content/26925317

也就是 content/id 这里的id是不同的

实现方式有两种：

第一种：

<ul><li v-for="item in list"><router-link :to="'/content/'+item.id">{{item.title}}</router-link></li></ul>

动态绑定 to 属性，传入 id，这里的 id 是 json 数据返回的

路由中需要这样写：

import Content from "./components/Content.vue" // 注册组件

// 路由配置
const routes = [{path: '/home', component: Home},{path: '/news', component: News},{path: '/content/:id', component: Content},{path: '*', redirect: '/home'}   /*默认跳转路由*/
]

注意：content 项的 path 需要以：xxx 的形式定义.

我们可以在 content 组件中使用生命周期函数获取到 id 值

// content 组件中
mounted() {console.log(this.$route.params)  // 获取动态路由传值
}

实现效果：

第二种： get 方式传值

与第一种实现方式不同，但可以达到同样的效果，

当然，我们还是需要先引入组件

import Pcontent from "./components/Pcontent.vue"

我们先来看路由上的配置

const routes = [{path: '/home', component: Home},{path: '/news', component: News},{path: '/content/:aid', component: Content},{path: '/pcontent', component: Pcontent},  // 与正常注入一样{path: '*', redirect: '/home'}   /*默认跳转路由*/
]

<ul><li v-for="(item,key) in list"><router-link :to="'/pcontent?id='+item.id">{{item.title}}</router-link></li></ul>

这里 to 属性同样需要动态绑定与第一种区别在于路径名称后面，是以 ? 自定义名称 = xxx 来定义的

获取 id 值

 mounted() {console.log(this.$route.query);}

实现效果:

转载于:https://www.cnblogs.com/Sky-Ice/p/9293402.html

vue-router 动态路由相关推荐

vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
Vue 增加动态路由功能【在原有系统上增加】
目录遇到问题 1. 修改router/index.js 2. 修改 store文件夹下的 2.1 增加 modules/permission.js 2.2 增加modules/tagsViews.j ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）
登录后我们拿到路由动态路由,后端传的数据可能为这个 {path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部 ...
vue admin 动态路由权限管理
主要思路通过后端接口返回数据进行判断 (通过后端实现的权限管理有许多种),在这里我们主要通过关键字即匹配前端路由meta.menu值来实现权限管理通常会把路由权限列表存至vux中箭头所指的便 ...

vue-router 动态路由

vue-router 动态路由相关推荐

最新文章

热门文章