有时我们通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 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. 【新书推荐】《ASP.NET Core微服务实战：在云环境中开发、测试和部署跨平台服务》 带你走近微服务开发

    <ASP.NET Core 微服务实战>译者序:https://blog.jijiechen.com/post/aspnetcore-microservices-preface-by-tr ...

  2. 6、python基本数据类型之序列类型

    前言:python的基本数据类型可以分为三类:数值类型.序列类型.散列类型,本文主要介绍序列类型及其通用操作. 一.序列类型 1)字符串(str):用单引号('),双引号("),三引号(三单 ...

  3. 机器学习-TensorFlow应用之 binned features, Cross features和optimizer

    概述 这一节主要介绍一下TensorFlow在应用的过程中的几个小的知识点,第一个是关于features的处理的,例如Bucketized (Binned) Features 和 Feature sc ...

  4. Go的切片：长度和容量

    虽然说 Go 的语法在很大程度上和 PHP 很像,但 PHP 中却是没有"切片"这个概念的,在学习的过程中也遇到了一些困惑,遂做此笔记. 困惑1:使用 append 函数为切片追加 ...

  5. FileZilla 报错“the server's certificate is unknown”

    FileZilla 是非常好用的一款FTP SFTP 管理工具. 但是filezilla会报错“the server's certificate is unknown” 并且会在window中看到以下 ...

  6. Ninja构建系统入门

    1. 介绍 开篇先介绍.先甩资料给大家看,之后再自己演示一下基本使用.Ninja 是Google的一名程序员推出的注重速度的构建工具,一般在Unix/Linux上的程序通过make/makefile来 ...

  7. Git提交代码和更新代码命令

    微信公众号:非科班的科班关注可了解更多的java教程和其它资源视频.问题或建议,请公众号留言; 1.Git提交代码 利用命令提交代码的步骤:1.1.拉取服务器代码,避免覆盖他人的代码 git pull ...

  8. 龙芯 fedora28 安装指南

    版权声明:原创文章,未经博主允许不得转载 关于硬件 龙芯3号的板子安装系统都差不多,我分别在 Lemote A1310 和 Lemote A1901 上都尝试过. 本文主要依据 Lemote A190 ...

  9. Dart语言学习(九) 运算符

    一.运算符及其描述 二.Dart运算符注意点 1. 除法运算符"/" 和 整除运算法"~/" 的区别 除法运算符 "/"  结果是浮点型 整 ...

  10. STVP编译时遇到no default placement for segment .FLASH_CODE

    最近编译STM8S003时需要使用flash库函数,看起来简单,实则折腾了超过1天.今天总结方法如下: 1.修改stm8s.h 156行  #define RAM_EXECUTION  注释去掉  如 ...