文档章节

vueRouter-Getting Started

tianyawhl
 tianyawhl
发布于 2017/09/12 09:13
字数 378
阅读 5
收藏 0

用Vue.js+vue-router创建单页应用是非常简单的。使用Vue.js,我们已经可以通过组合组件来组成应用程序,当你把vue-router添加进来,我们需要做的是,将组件component映射到路由(routes),然后告诉vue-router在哪里渲染它们,下面是基本的例子

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <hl>hello APP</hl>
        <P>
            <!-- 使用router-link组件来导航 -->
            <!--  通过传入"to"属性指定链接 -->
            <!-- <router-link> 默认会被渲染为一个a标签 -->
            <router-link to="/foo">GO to FOO</router-link>
            <router-link to="/bar">GO to BAR</router-link>
        </P>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件渲染到这里 -->
        <router-view></router-view>
    </div>
    <script>
        //0 如果使用模块化机制编程,导入Vue和VueRouter,要调用Vue.use(VueRouter)
        //1 定义路由组件
        //可以从其它文件import进来
        const Foo = {template:"<div>foo</div>"}
        const Bar = {template:"<div>bar</div>"}

        //2 定义路由
        //每个路由应该映射一个组件,其中"component"可以是通过Vue.extend()创建的组件构造器
        //或者只是一个组件配置对象,我们晚点再讨论嵌套路由
        const routes = [
          {path:"/foo",component:Foo},
          {path:"/bar",component:Bar}
        ]
        //3 创建router实例,然后传"routes"配置,你还可以传别的配置参数,不过先这么简单吧
        const router = new VueRouter({
            routes //(缩写)相当于routes:routes
        })
        //4.创建和挂载根实例
        //记得要通过router配置参数注入路由,从而让整个应用都有路由功能
        const app =new Vue({
            router
        }).$mount("#app")
    </script>
</body>

 

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 1
博文 200
码字总数 98515
作品 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-router: 从源码开始

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

玩弄心里的鬼
05/08
0
0
自定义vue全局组件use使用

自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter)、Vue.use(Mint)等等。其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个...

不负好时光
07/24
0
0
如何用vue-router为每个路由配置各自的title

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

detectiveHLH
07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

C++ gflags

gflags是google一个开源的处理命令行参数的库,相比getopt,更加容易使用。 定义参数 gflags主要支持的参数类型包括 DEFINEbool: boolean DEFINEint32: 32-bit integer DEFINEint64: 64-bit ...

SibylY
25分钟前
0
0
intellij IDEA Properties中文unicode转码问题

在IDEA中创建了properties文件,发现默认中文不会自动进行unicode转码。如下 在project settings - File Encoding,在标红的选项上打上勾,确定即可 效果图如下: unicode转码后效果...

muzi1994
26分钟前
0
0
Java IO类库之PipedWriter

一、PipedWriter介绍 PipedWriter是字符管道输出流,继承自Writer,功能与PipedOutputStream类似,通过与PipedReader组合使用实现类似管道的功能,在多线程环境下,一个线程使用PipedWriter...

老韭菜
30分钟前
0
0
精简分页组件(手写)

需要引入CSS(没错就是这4行) .pagelist { text-align: center; color: #666; width: 100%; clear: both; margin: 20px 0; padding-top: 20px }.pagelist a { color: #666; margin: 0 2px;......

AK灬
30分钟前
3
0
29 岁成为阿里巴巴 P8,工作前 5 年完成晋升 3 连跳,他如何做到?

泡泡是我的好朋友。今年 31 岁,毕业后就进了阿里巴巴,工作五年内从 P4 晋升至 P6、P7、P8。 和他很少聊到工作,但总觉得他有很棒的职场心得,应该分享出来,于是有了这次采访。希望对职场新...

Java填坑之路
32分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部