我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。能够提供参数的路由即为动态路由
第一步:定义组件

const Goods = {
template: `
<div>{{this.$route.params}}商品</div>
`,
created(){
console.log(this.$route.params);
},
watch:{
$route(){
console.log(this.$route.params);
}
}
}

第二部配置路由

const routes = [
{
path: '/goods/:type',
component: Goods
} ] const router = new VueRouter({
routes
}) const app = new Vue({
el: '#app',
router
})

第三不配置模板

<router-view></router-view>
<router-link to="/goods/book">图书商品</router-link>
<router-link to="/goods/car">汽车商品</router-link>
<router-link to="/goods/food">美食商品</router-link>
//监听路由
const Goods = {
template: `
<div>{{this.$route.params}}商品</div>
`,
watch:{
'$route': {
handler: function(){
console.log(this.$route.params);
},
immediate: true (立刻)
}
}

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

  1. vue——动态路由以及地址传参

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个”共用”的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 1 ...

  2. Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制

    思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...

  3. 18 vue 动态路由传参

    params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...

  4. Vue 动态路由传值

    一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...

  5. vue 动态路由 Get传值

    main.js //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', compone ...

  6. vue动态路由配置,vue路由传参

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路 ...

  7. Vue动态路由 Get传值

    <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 我是首页组件 <ul> < ...

  8. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

  9. vue 动态路由按需加载的三种方式

    在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...

随机推荐

  1. django序列化单表的4种方法的介绍

    这里主要是讲序列化单表的几种方法 先看下models中设计的表结构 from django.db import models # Create your models here. class Book ...

  2. echarts中间有字饼图Demo2

    echarts链接:http://gallery.echartsjs.com/editor.html?c=xHy2vIPzLQ 完整代码: option = { backgroundColor: 'b ...

  3. SQL Server2005/2008 作业执行失败的解决办法

    数据库:SQL Server 2005/2008,运行环境:Windows Server 2008  在数据库里的所有作业都执行失败,包括自动执行和手动执行.在事件查看器里看到的错误报告如下: 该 作 ...

  4. linux命令学习之:curl

    curl命令是一个利用URL规则在命令行下工作的开源文件传输工具.它支持文件的上传和下载,所以是综合传输工具,但按传统,习惯称curl为下载工具.作为一款强力工具,curl支持包括HTTP.HTTPS ...

  5. sqlserver中对于特定数据字段定义特定的数据类型

    char和varchar:汉字占两个字节,英文.数字或字符占一个 比如: 性别:男   女 可以定义为:char(2)或者是varchar(2)    因为性别是中文,中文占两个字节 nchar和nv ...

  6. jQuery封装和优化

    封装和优化插件 --封装插件 (function($){ //自定义插件代码 })(jQuery) --------------- (function($){ $.fn.extend({ //函数列表 ...

  7. (转)拉姆达表达式(Lambda Expressions) =>写法的涵义

      lambdaclass编译器 让我们先看一个简单的拉姆达表达式: x=>x/2 这个表达式的意思是:x为参数,对x进行相应的操作后的结果作为返回值. 通过这个拉姆达表达式,我们可以看到: 这 ...

  8. 事件类型(js)

    焦点事件:在页面获得或失去焦点时触发. 与document.hasFocus和document.activeElement属性配合,可以得到用户在页面的行踪. blur:元素失去焦点时触发.这个事件不 ...

  9. 789A Anastasia and pebbles

    A. Anastasia and pebbles time limit per test 1 second memory limit per test 256 megabytes input stan ...

  10. OpenSource.SerializationLibrary

    1. Cap'n Proto protocol buffer的主要作者之一创建的新项目.其主页描述Cap'n Proto的性能比PB快很多. http://kentonv.github.io/capn ...