有时我们通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 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. 【聚类评价】Calinski-Harabaz（CH）

    Calinski-Harabaz(CH) CH指标通过计算类中各点与类中心的距离平方和来度量类内的紧密度,通过计算各类中心点与数据集中心点距离平方和来度量数据集的分离度,CH指标由分离度与紧密度的比值 ...

  2. Java入门 - 语言基础 - 20.Stream和File和IO

    原文地址:http://www.work100.net/training/java-stream-file-io.html 更多教程:光束云 - 免费课程 Stream和File和IO 序号 文内章节 ...

  3. Java入门 - 面向对象 - 04.抽象类

    原文地址:http://www.work100.net/training/java-abstract.html 更多教程:光束云 - 免费课程 抽象类 序号 文内章节 视频 1 概述 2 Java抽象 ...

  4. 国产CPU 申威1621 异数OS基础组件理论性能测试报告

    国产CPU 申威1621 异数OS基础组件理论性能测试报告 文章目录 国产CPU 申威1621 异数OS基础组件理论性能测试报告 前言 测试平台 测试项目 SW1621 异数OS 容器虚拟交换机模拟性 ...

  5. lisp学习总结（一）

    lisp太简单 lisp核心太简单了只有几个简单的逻辑定理,简单到你会认为他啥事都做不了. lisp语法太简单了,只有符号,参数,以及括号,组成一种万能的表达式. 由于上述lisp的简单,所以对于初学 ...

  6. 团队项目——Alpha发布1

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/homework 这个作业要求在哪里 https ...

  7. Dynamics 365 CRM 在 Connected Field Service 中部署 IoT Central （三）- 发送 work order 和 booking 信息给 IoT Central

    首先, 我们可以打开IoT alert, 并且点击上的 create a flow. 接下来,我们使用微软准备好的模板:Sample Contoso- When a work order is cre ...

  8. 基于OpenCV的双目视觉匹配测距系统

    刚读研究生的时候,自己导师研究的方向是双目视觉,于是让自己研究OpenCV,折腾了几个月,算法上没啥突破,不过工程上还是折腾出了一个能用的小玩意,基于OpenCV实现了相机的标定.双目视觉图片的矫正. ...

  9. （初学JS）JS基础——ATM机终端程序编写<1.0>

    初步学习了JS基础,为了更好地将所学知识熟练运用,我进行了银行ATM存取款机的模拟程序编写,主要通过VScode终端实现系列操作. 我的ATM程序包括6个主要功能:1.查询余额 2.存钱 3. 取钱 ...

  10. Java小白入门：聊聊Java这门编程语言

    一.什么叫做编程 首先我们应该了解一下什么叫做编程. 百度百科词条的解释: 编程是编定程序的简称,是让计算机代我们解决某个问题,是对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终 ...