文档章节

vueRouter-命名路由

tianyawhl
 tianyawhl
发布于 2017/09/12 10:29
字数 272
阅读 8
收藏 0

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

 routes: [{
    path: "/user/:userId",
    name: "user",
    component: User
    }]
    })
要链接到一个命名路由,可以给router-link的to属性传一个对象
<router-link :to="{name:'user',params:{userId:123}}">User</router-link>
这跟代码调用router.push()是一回事
router.push({name:'user',params:{userId:123}})
这两种方式都会把路由导航到/user/123路径

完整的一个例子:

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <h1>Named Routes</h1>
        <p>current route name:{{$route.name}}</p>
        <ul>
            <li>
                <router-link :to="{name:'home'}">home</router-link>
            </li>
            <li>
                <router-link :to="{name:'foo'}">foo</router-link>
            </li>
            <li>
                <router-link :to="{name:'bar',params:{id:123}}">bar</router-link>
            </li>
        </ul>
        <router-view class="view"></router-view>
    </div>
    <script>
    const Home = { template: `<div>this is Home</div>` }
    const Foo = { template: `<div>this is Foo</div>` }
    const Bar = { template: `<div>this is bar {{$route.params.id}}</div>` }
    const router = new VueRouter({

        routes: [
            { path: '/', name: 'home', component: Home },
            { path: '/foo', name: 'foo', component: Foo },
            { path: '/bar/:id', name: 'bar', component: Bar }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>

 

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 2
博文 214
码字总数 108562
作品 0
常州
前端工程师
VueRouter 源码深度解析

该文章内容节选自团队的开源项目 InterviewMap。项目目前内容包含了 JS、网络、浏览器相关、性能优化、安全、框架、Git、数据结构、算法等内容,无论是基础还是进阶,亦或是源码解读,你都能...

夕阳
07/27
0
0
vue-router源码阅读学习

如同分析vuex源码我们首先通过一个简单例子进行了解vue-router是如何使用的,然后在分析在源码中是如何实现的 示例 下面示例来自于example/basica/app.js 首先调用Vue.use(VueRouter),Vue.us...

B_Cornelius
02/06
0
0
Vue中路由管理器Vue Router使用方式(一)

一、在模块编程中安装VueRouter 1.Npm安装vue-router 2.在main.js中引用并使用VueRouter 3.定义路由,创建路由实例 4.注册路由实例 二、Vue Router基础使用示例 1.App.vue 页面定义,使用rou...

tianma3798
10/16
0
0
解密vue-router: 从源码开始

前几天笔者看到一个问题:你真的了解vue-router的吗?你知道vue-router的运行原理吗?抱着这样的问题,笔者开始了vue-router的源码探索之旅。本文并没有逐行去深究源码,而是跟着笔者画的流程...

玩弄心里的鬼
05/08
0
0
如何用vue-router为每个路由配置各自的title

传统方法 以前在单页面路由中,就只能在html文件中定一个固定的网站的title。如果想要动态的去修改,需要使用如下的方法。 这样会让我们做很多无用功。显得十分蠢。 使用Vue-Router的方法 首...

detectiveHLH
07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring加载properties文件的两种方式

在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取properties里面的配置,这样后期只需要改动properties文件即可,不需要修...

架构师springboot
9分钟前
0
0
分布式事务,原来可以这么玩?

多个数据要同时操作,如何保证数据的完整性,以及一致性? 答 : 事务 ,是常见的做法。 举个栗子: 用户下了一个订单,需要修改 余额表 , 订单 表 , 流水 表 ,于是会有类似的伪代码: st...

微笑向暖wx
11分钟前
0
0
IE6兼容PNG32图片显示PNG8图片

IE6并不是不支持PNG图片,只是不支持半透明通道。 是支持PNG8色表引索全透明的。 以往都是通过滤镜或统统使用PNG8实现兼容。 但是我发现twitter的png图标可以在chrome中显示png32,在IE6显示...

linsk1998
23分钟前
0
0
linux运维需要掌握的基础知识

踏入linux运维工程师这一职业,其实有很多工具技能需要掌握,下面我来给大家一一介绍。 1、shell脚本和另一个脚本语言,shell是运维人员必须具备的,不懂这个连入职都不行,至少也要写出一些...

linuxprobe16
25分钟前
0
0
《netty入门与实战》笔记-03:数据传输载体 ByteBuf 介绍

ByteBuf结构 首先,我们先来了解一下 ByteBuf 的结构 以上就是一个 ByteBuf 的结构图,从上面这幅图可以看到: ByteBuf 是一个字节容器,容器里面的的数据分为三个部分,第一个部分是已经丢弃...

Funcy1122
58分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部