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

比如,我想在 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);
}

实现效果:

vue-router 动态路由的更多相关文章

  1. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  2. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  3. vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)

    登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...

  4. vue --》动态路由的实现 (根据用户的权限来访问对应的模块)

    为了设置用户的访问权限,所以在一个vue工程中,往往需要前端和后端开发人员共同配合设置动态路由, 进而实现根据用户的权限来访问对应的模块 1.首先在登录页面,前端跟据后端返回的路由信息进行配置,配置后 ...

  5. 浅谈vue之动态路由匹配

    在日常开发过程中,可能会遇到一些类似于新闻详情页的内容,需要把所有详情页映射到同一组件上,这是动态路由匹配的应用场景之一.在使用的过程中,也遇到过一些小坑,此篇做个简要的总结说明: 基本使用 { pa ...

  6. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  7. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  8. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  9. vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

    首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...

  10. 使用VUE开发用户后台时的动态路由问题、按钮权限问题以及其他页面处理问题

    如今前后端分离是大势所趋,笔者虽然是做后台的,但也不得不学学前端的流行框架VUE -_-||| . 为了学习VUE,笔者搭建了一个简单的用户后台,以此来了解VUE的开发思路(注:本项目不用于实际开发, ...

随机推荐

  1. Nginx网络架构实战学习笔记(三):nginx gzip压缩提升网站速度、expires缓存提升网站负载、反向代理实现nginx+apache动静分离、nginx实现负载均衡

    文章目录 nginx gzip压缩提升网站速度 expires缓存提升网站负载 反向代理实现nginx+apache动静分离 nginx实现负载均衡 nginx gzip压缩提升网站速度 网页内容的压 ...

  2. PAT_A1100#Mars Numbers

    Source: PAT A1100 Mars Numbers (20 分) Description: People on Mars count their numbers with base 13: ...

  3. Django框架(二十七)—— ContentType组件

    目录 ContentType组件 一.什么是ContentType组件 二.使用ContentType 三.使用场景总结 ContentType组件 一.什么是ContentType组件 conten ...

  4. Tomcat启动脚本(1)startup.bat

    @echo off rem Licensed to the Apache Software Foundation (ASF) under one or more rem contributor lic ...

  5. CF963

    CF963C 首先假设横向被分成p块纵向被分成q块,\(C_i\)为横向长度为\(i\)的方块个数,\(D_i\)为纵向长度为\(i\)的方块个数 \(p\times q=\)总块数T,q要是所有\( ...

  6. # Python第十节 传参

    Python第十节 传参 一. 变量和变量名 首先说明变量名和变量的一点差异 例如: var = [1, 2, 3] `var = "Google" 调用变量var的时候, 既可以 ...

  7. Codeforces 747F Igor and Interesting Numbers DP 组合数

    题意:给你一个数n和t,问字母出现次数不超过t,第n小的16进制数是多少. 思路:容易联想到数位DP, 然而并不是...我们需要知道有多少位,在知道有多少位之后,用试填法找出答案.我们设dp[i][j ...

  8. HDU 6534 莫队+ 树状数组

    题意及思路:https://blog.csdn.net/tianyizhicheng/article/details/90369491 代码: #include <bits/stdc++.h&g ...

  9. PHP-最长有效括号

    给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 1: 输入: "(()"输出: 2解释: 最长有效括号子串为 "()" ...

  10. vue指令系统

    一.vue基础 使用vue需在官网上先下载vue.js,网址:https://cn.vuejs.org/v2/guide/installation.html.然后: 在project中引入vue.js ...