前面介绍的路由都是路径和组件一对一映射的

有时候需要多个路径映射到一个组件，这个组件根据参数的不同动态改变，这时候需要用到动态路由

动态路由这样定义路由路径：

path: '/foo/:id'--可以不叫id，任意命名

以下两种路径都会映射到foo组件

<router-link to="/foo/1">foo1</router-link>

<router-link to="/foo/2">foo2</router-link>

后面跟着的参数（1和2）通过$route.params.id获取

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>abc</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <div id="app">

        <h1>Hello App!</h1>

        <p>

            <!-- 使用 router-link 组件来导航. -->

            <!-- 通过传入 `to` 属性指定链接. -->

            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

            <router-link to="/foo/1">foo1</router-link>

            <router-link to="/foo/2">foo2</router-link>

        </p>

        <!-- 路由出口 -->

        <!-- 路由匹配到的组件将渲染在这里 -->

        <router-view></router-view>

    </div>

</body>

<script type="text/javascript">

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。

// 可以从其他文件 import 进来

const Foo = { template: '<div>foo:{{ $route.params.id }}</div>' }

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

    { path: '/foo/:id', component: Foo }

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

    routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

const app = new Vue({

    router // （缩写）相当于 router: router

}).$mount('#app')

</script>

</html>

例子中只有foo/1和/foo/2链接，可以在浏览器随意输入id，比如：

xxx/xx.html#/foo/3

想要根据参数动态改变页面内容，在mounted里调用不行,mounted只在组件第一次挂载时才调用，因为我们是挂载同一个组件，所以非第1次就不会调用了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>abc</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <div id="app">

        <h1>Hello App!</h1>

        <p>

            <!-- 使用 router-link 组件来导航. -->

            <!-- 通过传入 `to` 属性指定链接. -->

            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

            <router-link to="/foo/1">foo1</router-link>

            <router-link to="/foo/2">foo2</router-link>

        </p>

        <!-- 路由出口 -->

        <!-- 路由匹配到的组件将渲染在这里 -->

        <router-view></router-view>

    </div>

</body>

<script type="text/javascript">

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。

// 可以从其他文件 import 进来

// const Foo = { template: '<div>foo:{{ $route.params.id }}</div>' }

const Foo = Vue.extend({

    template: '<div id="testzy"></div>',

    mounted(){

        alert(this.$route.params.id);

        if (this.$route.params.id == 1) {

          document.getElementById("testzy").innerText = "hehe";

        }else{

          document.getElementById("testzy").innerText = "haha";

        }

    }

});

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

    { path: '/foo/:id', component: Foo }

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

    routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

const app = new Vue({

    router // （缩写）相当于 router: router

}).$mount('#app')

</script>

</html>

可以在watch里观察路由路径的改变，注意：watch方法调用在挂载之前，所以第一次点击，testzy这个id不存在

document.getElementById("testzy")

返回的是null

第一次以后点击返回正常

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>abc</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <div id="app">

        <h1>Hello App!</h1>

        <p>

            <!-- 使用 router-link 组件来导航. -->

            <!-- 通过传入 `to` 属性指定链接. -->

            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

            <router-link to="/foo/1">foo1</router-link>

            <router-link to="/foo/2">foo2</router-link>

        </p>

        <!-- 路由出口 -->

        <!-- 路由匹配到的组件将渲染在这里 -->

        <router-view></router-view>

    </div>

</body>

<script type="text/javascript">

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。

// 可以从其他文件 import 进来

// const Foo = { template: '<div>foo:{{ $route.params.id }}</div>' }

const Foo = Vue.extend({

    template: '<div id="testzy">{{ $route.params.id }}</div>',

    // methods: {

    //     change() {

    //         alert("fd");

    //         // if (this.$route.params.id == 1) {

    //         //     document.getElementById("testzy").innerText = "hehe";

    //         // } else {

    //         //     document.getElementById("testzy").innerText = "haha";

    //         // }

    //     },

    // }

});

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

    { path: '/foo/:id', component: Foo }

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

    routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

const app = new Vue({

    router, // （缩写）相当于 router: router

    watch: {

        $route(to, from) {

            alert(to.path);

            document.getElementById("testzy").innerText = this.$route.params.id;

        }

    },

}).$mount('#app')

</script>

</html>

也可以把watch写在extend里，这个时候，第一次点击（初次挂载）并不会调用watch，因为第一次不算改变，所以得配合mounted一起使用（mounted在第一次挂载调用）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>abc</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <div id="app">

        <h1>Hello App!</h1>

        <p>

            <!-- 使用 router-link 组件来导航. -->

            <!-- 通过传入 `to` 属性指定链接. -->

            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

            <router-link to="/foo/1">foo1</router-link>

            <router-link to="/foo/2">foo2</router-link>

        </p>

        <!-- 路由出口 -->

        <!-- 路由匹配到的组件将渲染在这里 -->

        <router-view></router-view>

    </div>

</body>

<script type="text/javascript">

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。

// 可以从其他文件 import 进来

// const Foo = { template: '<div></div>' }

const Foo = Vue.extend({

    template: '<div id="testzy"></div>',

    methods: {

        change() {

          alert("come");

          document.getElementById("testzy").innerText = this.$route.params.id;

            //alert("fd");

            // if (this.$route.params.id == 1) {

            //     document.getElementById("testzy").innerText = "hehe";

            // } else {

            //     document.getElementById("testzy").innerText = "haha";

            // }

        },

    },

    mounted(){

      document.getElementById("testzy").innerText = this.$route.params.id;

    },

    watch:{$route:"change"}

});

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

    { path: '/foo/:id', component: Foo }

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

    routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

const app = new Vue({

    router, // （缩写）相当于 router: router

}).$mount('#app')

</script>

</html>

可以定义多个参数：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>abc</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <div id="app">

        <h1>Hello App!</h1>

        <p>

            <!-- 使用 router-link 组件来导航. -->

            <!-- 通过传入 `to` 属性指定链接. -->

            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

            <router-link to="/foo/1/11">foo1</router-link>

            <router-link to="/foo/2/22">foo2</router-link>

        </p>

        <!-- 路由出口 -->

        <!-- 路由匹配到的组件将渲染在这里 -->

        <router-view></router-view>

    </div>

</body>

<script type="text/javascript">

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。

// 可以从其他文件 import 进来

// const Foo = { template: '<div>foo:{{ $route.params.id }}</div>' }

const Foo = Vue.extend({

    template: '<div id="testzy"></div>',

    methods: {

        change() {

          //alert("come");

          document.getElementById("testzy").innerText = this.$route.params.id1+","+this.$route.params.id2;

            //alert("fd");

            // if (this.$route.params.id == 1) {

            //     document.getElementById("testzy").innerText = "hehe";

            // } else {

            //     document.getElementById("testzy").innerText = "haha";

            // }

        },

    },

    mounted(){

      document.getElementById("testzy").innerText = this.$route.params.id1+","+this.$route.params.id2;

    },

    watch:{$route:"change"}

});

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

    { path: '/foo/:id1/:id2', component: Foo }

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

    routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

const app = new Vue({

    router, // （缩写）相当于 router: router

}).$mount('#app')

</script>

</html>

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

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

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

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

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

  3. 06 Vue路由简介,原理,实现及嵌套路由,动态路由

    路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...

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

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

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

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

  6. vue路由-动态路由和嵌套路由

    一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...

  7. vue router动态路由

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

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

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

  9. nuxt.js如何实现同级目录下建多个动态路由，并将链接设置.html后缀

    nuxt.js中如果在同级目录中建两个_xxxx.vue的动态路由文件,那么页面跳转始终是跳的一个页面,如何解决这个问题呢?下面举个栗子: 第一步:新建两个页面文件 第二步:在nuxt.config. ...

随机推荐

  1. JAVA中常用的异常处理方法

    1.在Java项目中经常遇到的异常情况 算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCastExceptio ...

  2. redis集合

    存值 r1 = conn.sadd('urls', 'www.bing.com') r2 = conn.sadd('urls', 'www.baidu.com') 若要存入集合的值已存在(redis) ...

  3. windows下生成文件目录树

    1.命令提示: tree /? 2.显示当前目录下的目录树(不显示文件) tree 3.递归显示目录结构(显示文件,常用于项目说明) tree /F 4.将显示的内容重定向到txt tree > ...

  4. 大叔 Frameworks.Entity.Core 3 Predicate

    Frameworks.Entity.Core\Commons\Predicate\ 1LinqEntity.cs /// IQueryable扩展方法:条件过滤与排序功能    /// Modify ...

  5. [ Python入门教程 ] Python中JSON模块基本使用方法

    JSON (JavaScript Object Notation)是一种使用广泛的轻量数据格式,Python标准库中的json模块提供了一种简单的方法来编码和解码JSON格式的数据.用于完成字符串和p ...

  6. allegro设置内存分配器的一个坑

    看过<游戏引擎架构>后我开始对内存的分配问题关注,一直想用内存分配器来管理游戏的内存.前两天发现了有许多第三方内存分配器可以用.最后挑中了nedmalloc,这个库也是ogre所使用的,测 ...

  7. selenium，CSS定位法应用

    如图,下载按钮 查看其元素,是无法直接定位的,通过xpath也无法定位,转为firepath获取的CSS也是无效的#downloadItems>a 但是为经过firepath,直接在html下复 ...

  8. C语言入门：一维数组的概要

    数组的概念: 具有相同数据的有序集合 一维数组的定义格式: int a[5]; 类型说明符  数组名(标识符)[常量表达式(长度)]; 一维数组下标 : 数组的下标 从0开始  最大下标值 为 数组的 ...

  9. innobackupex 恢复脚本

    此脚本需要与我前几天写的备份脚本配套才能使用 这里也对innobackupex吐槽下,当使用innobackupex进行恢复的时候,必须要清除所有原数据文件,但是一旦恢复失败,则连实例都将丢失,不成功 ...

  10. IDEA | 更改idea打开新项目默认配置

    背景 使用过idea的童鞋应该都发现,用idea打开一个新项目,总是需要重新配置一遍,它会使用系统默认配置,例如maven.JDK等设置. 解决方案 IDEA其实有个设置是可以更改新项目的默认配置,大 ...