有时我们通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

我们直接在路由下添加一个 name 即可.

 注意，如果使用命名路由route-link的to属性前面有有个冒号（对比标红部分）
<!DOCTYPE html>

<!-- saved from url=(0077)https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/home -->

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>abc</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" href="./basic_01_files/custom.css">

</head>

<body>

    <div id="app">

        <div class="row">

            <div class="col-xs-offset-2 col-xs-8">

                <div class="page-header">

                    <h2>Router Basic - 01</h2>

                </div>

            </div>

        </div>

        <div class="row">

            <div class="col-xs-2 col-xs-offset-2">

                <div class="list-group">

                    <router-link class="list-group-item" :to="{ name: 'home'}">Go to Foo</router-link>

                    <router-link class="list-group-item" to="/about">Go to Bar</router-link>

                </div>

            </div>

            <router-view></router-view>

        </div>

    </div>

    <template id="home">

        <div>

            <h1>Home</h1>

            <p>{{msg}}</p>

        </div>

    </template>

    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>

    <script>

    var todoItem = Vue.extend({

        data: function() {

            return {

                todoData: [

                    { id: 0, text: '蔬菜' },

                    { id: 1, text: '奶酪' },

                    { id: 2, text: '随便其它什么人吃的东西' }

                ]

            };

        },

        template: `

        <ul>

            <li v-for='(d, i) in todoData' :key="i">

                {{ d.text }}

            </li>

        </ul>

  `,

    });

    var t_test = Vue.extend({

        data:function(){

            return {

                msg:"hello,test"

            };

        },

        template:"#home"

        }

    );

    // Home = { template: '<div>foo</div>' }

    // About = { template: '<div>bar</div>' }

    routes = [

        { path: '/home',name:"home",component: t_test },

        { path: '/about', component: todoItem }

    ]

    router = new VueRouter({

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

    });

    app = new Vue({

        router: router

    }).$mount('#app');

    </script>

</body>

</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="{ name: 'id',params:{id: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', name:"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="{name:'ids',params:{id1:1,id2: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',name:"ids" ,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>

动态+命名+push：

<!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>

    <div id="app">

        <h1>Hello App!</h1>

        <!-- 路由出口 -->

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

        <router-view>

        </router-view>

    </div>

</body>

<script type="text/javascript">

const test = Vue.extend({

    template: '<a @click="pushtest" href="javascript:void(0)">Navigate to {{$route.params.name}}</a>',

    methods: {

        pushtest() {

            //alert("bar");

            if (this.$route.params.name == "bar") {

                this.$router.push({ name: 'test',params:{name:"foo"} });

            }else{

                this.$router.push({ name: 'test',params:{name:"bar"} });

            }

            //alert("fdas");

        },

    },

});

// 2. 定义路由

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

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

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

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

const routes = [

    { path: '/', redirect: "/test/bar" },

    // { path: '/foo', name: "foo", component: Foo },

    { path: '/test/:name', name: "test", component: test },

]

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

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

const router = new VueRouter({

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

})

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

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

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

const app = new Vue({

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

}).$mount('#app') // 现在，应用已经启动了！

</script>

</html>

如果要带query参数，可以这样：

<!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>

    <div id="app">

        <h1>Hello App!</h1>

        <!-- 路由出口 -->

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

        <router-view>

        </router-view>

    </div>

</body>

<script type="text/javascript">

const test = Vue.extend({

    template: '<a @click="pushtest" href="javascript:void(0)">Navigate to {{$route.params.name}}</a>',

    methods: {

        pushtest() {

            //alert("bar");

            if (this.$route.params.name == "bar") {

                this.$router.push({ name: 'test',params:{name:"foo"} ,query:{ param: 'foo' }});

            }else{

                this.$router.push({ name: 'test',params:{name:"bar"} ,query:{ param: 'bar' }});

            }

            //alert("fdas");

        },

    },

});

// 2. 定义路由

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

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

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

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

const routes = [

    { path: '/', redirect: "/test/bar" },

    // { path: '/foo', name: "foo", component: Foo },

    { path: '/test/:name', name: "test", component: test },

]

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

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

const router = new VueRouter({

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

})

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

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

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

const app = new Vue({

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

}).$mount('#app') // 现在，应用已经启动了！

</script>

</html>

网址是类似这样的：

xxxxx.html#/test/foo?param=foo

vue路由--命名路由的更多相关文章

  1. 17flutter中的路由/命名路由/命名路由传值/无状态组件传值/有状态组件传值。

    main.dart import 'package:flutter/material.dart'; import 'package:flutter_demo/pages/Search.dart'; i ...

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

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

  3. Vue路由-命名视图实现经典布局

    Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  5. Vue命名路由

    Vue命名路由 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

    1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...

  7. vue 命名路由

    有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. const ro ...

  8. vue中的路由

           路由配置项:        import Router from ‘vue-router’                          1.path:路径              ...

  9. VueJs(11)---vue-router（命名路由，命名视图，重定向别名，路由组件传参）

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

随机推荐

  1. 由Kaggle竞赛wiki文章流量预测引发的pandas内存优化过程分享

    pandas内存优化分享 缘由 最近在做Kaggle上的wiki文章流量预测项目,这里由于个人电脑配置问题,我一直都是用的Kaggle的kernel,但是我们知道kernel的内存限制是16G,如下: ...

  2. Scheme实现数字电路仿真(2)——原语

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/12045295.html 作者:窗户 ...

  3. MySQL多表联查以及以及架构

    多表之间关联查询:      据库操作中,多表联合查询是后台开发者常用到的查询语句. JOIN SQL JOIN 子句用于把来自两个或多个表的行结合起来,最常见的 JOIN 类型:SQL INNER ...

  4. 十大排序算法（Java实现）

    一.冒泡排序(Bubble Sort) public class BubbleSort { public static void main(String[] args) { int[] arr = { ...

  5. [bzoj4827] [洛谷P3723] [Hnoi2017] 礼物

    Description 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是 ...

  6. java小心机(2)| 重载和构造器的小细节

    每天进步一点点,距离大腿又近一步! 阅读本文大概需要10分钟 java小心机,为你诉说java鲜为人知的一面 涉及基本数据类型的重载 基本类型能从一个"较小"的类型自动提升到&qu ...

  7. 深入理解Java虚拟机：JVM高级特性与最佳实践

    第一部分走近Java第1章走近Java21.1概述21.2Java技术体系31.3Java发展史51.4Java虚拟机发展史91.4.1SunClassicExactVM91.4.2SunHotSpo ...

  8. JVM: JVM 内存划分

    概述 如果在大学里学过或者在工作中使用过 C 或者 C++ 的读者一定会发现这两门语言的内存管理机制与 Java 的不同.在使用 C 或者 C++ 编程时,程序员需要手动的去管理和维护内存,就是说需要 ...

  9. js解析json时报：Unexpected token s in JSON at position 0

    原因肯定是返回的json格式有问题 最有可能是后台在程序执行过程中,输出了某些调试信息等等,这些输出的字符串和json拼接成了新的字符串来解析,这时就会报错: 比如我在入口文件里var_dump了__ ...

  10. docker基础及命令

    1.启动docker sudo systemctl start docker sudo systemctl restart docker sudo systemctl stop docker sudo ...