文档章节

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
粉丝 3
博文 226
码字总数 115636
作品 0
常州
前端工程师
私信 提问
详解vue-router 初始化时做了什么

vue router 的初始化使用步骤 我们首先来看 vue-router 的使用步骤,然后再分别去看各个步骤都发生了什么。 使用 vue-router 需要经过一下几个步骤: 引入 vue-router: 利用 vue 的插件机制...

peakedness丶
11/20
0
0
VueRouter 源码深度解析

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

夕阳
10/28
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.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。 路由,其实就是指向的意思,当我点击页面上的home按钮时...

peakedness丶
11/08
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

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
16分钟前
1
0
在PC上测试移动端网站和模拟手机浏览器的5大方法

总结很全面,保存下来以备不时之需。原文地址:https://www.cnblogs.com/coolfeng/p/4708942.html

kitty1116
42分钟前
3
0
分布式Session共享解决方案

分布式Session一致性? 说白了就是服务器集群Session共享的问题 Session的作用? Session 是客户端与服务器通讯会话跟踪技术,服务器与客户端保持整个通讯的会话基本信息。 客户端在第一次访...

Java干货分享
48分钟前
6
0
开源软件和开源模式面临的生存危机

导读 开源模式可能正面临一场危机。越来越多的开源软件和平台被大型云计算服务商融入自家的云服务体系,并以此获利颇丰,但并不支付费用,也没有对开源社区做出相应的回馈。而实际上,大部分...

问题终结者
50分钟前
3
0
让看不见的AI算法,助你拿下看得见的广阔市场

人工智能技术的飞速发展给各行各业都带来了深远的影响,AI已被视为企业提升运营效能、应对市场竞争的必经之路。然而对于一些企业而言,让AI真正实现落地和应用,并且创造价值,仍是一件需要努...

个推
54分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部