vue路由--动态路由

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

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

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

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路由--动态路由的更多相关文章

vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）
登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...
Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
06 Vue路由简介,原理,实现及嵌套路由,动态路由
路由概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...
vue --》动态路由的实现（根据用户的权限来访问对应的模块）
为了设置用户的访问权限,所以在一个vue工程中,往往需要前端和后端开发人员共同配合设置动态路由, 进而实现根据用户的权限来访问对应的模块 1.首先在登录页面,前端跟据后端返回的路由信息进行配置,配置后 ...
浅谈vue之动态路由匹配
在日常开发过程中,可能会遇到一些类似于新闻详情页的内容,需要把所有详情页映射到同一组件上,这是动态路由匹配的应用场景之一.在使用的过程中,也遇到过一些小坑,此篇做个简要的总结说明: 基本使用 { pa ...
vue路由-动态路由和嵌套路由
一.动态路由我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...
vue router动态路由
<div id="#app"> <router-link to="/user/header">路由1</router-link&g ...
使用VUE开发用户后台时的动态路由问题、按钮权限问题以及其他页面处理问题
如今前后端分离是大势所趋,笔者虽然是做后台的,但也不得不学学前端的流行框架VUE -_-||| . 为了学习VUE,笔者搭建了一个简单的用户后台,以此来了解VUE的开发思路(注:本项目不用于实际开发, ...
nuxt.js如何实现同级目录下建多个动态路由，并将链接设置.html后缀
nuxt.js中如果在同级目录中建两个_xxxx.vue的动态路由文件,那么页面跳转始终是跳的一个页面,如何解决这个问题呢?下面举个栗子: 第一步:新建两个页面文件第二步:在nuxt.config. ...

随机推荐

Asp.Net Core Identity 隐私数据保护
前言 Asp.Net Core Identity 是 Asp.Net Core 的重要组成部分,他为 Asp.Net Core 甚至其他 .Net Core 应用程序提供了一个简单易用且易于扩展的基础 ...
【Java并发基础】加锁机制解决原子性问题
前言原子性指一个或多个操作在CPU执行的过程不被中断的特性.前面提到原子性问题产生的源头是线程切换,而线程切换依赖于CPU中断.于是得出,禁用CPU中断就可以禁止线程切换从而解决原子性问题.但是这种 ...
python 判断文件的字符编码
import chardet f = open(file='test1.txt', mode='rb') data = f.read() print(chardet.detect(data))
我的第一个 Kaggle 比赛学习 - Titanic
背景 Titanic: Machine Learning from Disaster - Kaggle 2 年前就被推荐照着这个比赛做一下,结果我打开这个页面便蒙了,完全不知道该如何下手. 两年后,再 ...
超越队西柚考勤系统——beta冲刺3
一.成员列表姓名学号蔡玉蓝(组长) 201731024205 郑雪 201731024207 何玉姣 201731024209 王春兰 201731024211 二.SCRUM部分 (1)各成员 ...
vue3的打包及打包的坑
1.vue3没有vue.config.js文件,在根目录下建一个vue.config.js文件 2.vue.config.js 3.vue3.3版本前的打包命令 vue3.3版本之后我用3.3之 ...
白话 spring AOP
------------------------------------ 剩下的时间不多了,抓经做自己想做的吧 AOP: 专业术语叫做面向切面的编程为什么要使用aop: 为了简化代码, 将相同代码抽 ...
Spring注解开发系列Ⅸ --- 异步请求
一. Servlet中的异步请求在Servlet 3.0之前,Servlet采用Thread-Per-Request的方式处理请求,即每一次Http请求都由某一个线程从头到尾负责处理.如果要处理一些 ...
react脚手架搭建命令 react常用库
react项目一般需要的组件库 react-redux 状态管理库 react-router-dom 路由 sass /less style-compon ...
tmobst6
1.(单选题)Oracle数据库中,在SQL语句中连接字符串的方法是:(). A)CAT B)CONCAT C)JOIN D)UNION 2.(单选题)在数据库中,有一个名为seq的序列对象,以下语句 ...

vue路由--动态路由

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

随机推荐

热门专题