文档章节

vueRouter-命名路由

tianyawhl
 tianyawhl
发布于 2017/09/12 10:29
字数 272
阅读 7
收藏 0
点赞 0
评论 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
粉丝 1
博文 192
码字总数 88621
作品 0
常州
前端工程师
解密vue-router: 从源码开始

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

玩弄心里的鬼 ⋅ 05/08 ⋅ 0

vue-router 基本使用

 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => a...

为了美好的明天 ⋅ 05/01 ⋅ 0

前端路由简介以及vue-router实现原理

后端路由简介 路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样 大致流程可以看成这样: 浏览器发出请求 服务器监听到80端口(或443)有请求过来,并解析url路径 ...

muwoo ⋅ 06/01 ⋅ 0

Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。在这篇文章中,我会把它如...

笔阁 ⋅ 04/16 ⋅ 0

前端路由探究(1) vue-router源码学习-基本数据结构

搭建实验环境 首先github download下来https://github.com/vuejs/vue-router vue-router最新的代码,代码在src下,结构清晰,但不适合调试看中间的一些处理结果,所以新建一个文件夹,新建i...

Kurset ⋅ 2017/12/09 ⋅ 0

vue-router 地址切换视图不切换

在使用vue-router做路由的时候,在切换视图时,地址栏发生了变化而视图缺无法切换,也没有什么报错提示,看文档,再次认真看文档还是不明白为什么。 最后发现在定义路由时,将routes数组写成...

小昭归来 ⋅ 2016/12/19 ⋅ 0

vue-router 子路由动态路由,没有效果,求帮忙!

router.js const routes = [ ]; //路由跳转 const router = new VueRouter({ }); 点击按钮进行路由跳转的代码 var result = JSON.parse(JSON.stringify(item)); result.id = result.cprogram......

哈雷路亚 ⋅ 2017/08/09 ⋅ 0

森波科技/vue-vueRouter-webpack

#vue-vueRouter-webpack 本项目可以帮你快速搭建一个基于Vue的单页面富应用,但这并不意味着是最佳实践,所有的目录结构和webpack配置都可以根据自己需要修改 ##教程 可以访问下面的链接来查看...

森波科技 ⋅ 2016/11/09 ⋅ 0

使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。 在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,...

一个敲代码的前端妹子 ⋅ 05/16 ⋅ 0

vue 路由的使用

vue路由的使用 ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传...

龙之天空 ⋅ 2016/12/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部