-
简介
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为
-
安装
2.1 直接下载/CDN
https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。
你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js
这样指定 版本号 或者 Tag。
在 Vue 后面加载 vue-router
,它会自动安装的:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
2.2 NPM
npm install vue-router
如果在一个模块化工程中使用它,必须要通过 Vue.use()
明确地安装路由功能:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 标签,则无须如此 (手动安装).
3. 使用
使用方式很简单,vue-router这个插件已经我们构造好了基本代码,
我们只需要填充创建的组件路径即可。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
然后让导出的router和当前页面实例关联起来,即在当前vue实例中引入router
import Vue from 'vue'
import App from './App'
import router from './router'
import my from './my'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
render:h=>h(my)
})
如果没有点击路由路径,当前页面看到的是router-view(路由容器中的东西)中的内容
<template>
<div id="app">
<img src="./assets/logo.png">
//路由容器
<router-view/>
</div>
</template>
如果点击了路由,就会按照router.js文件中的定义的路由进行匹配,匹配后文件之后,对应的就会加载到路由容器中,就浏览器地址栏同时进行路由的跳转。
<router-link to="/home">Home</router-link>
<router-link to="/card">Card</router-link>