说明
Vue Router 是 Vue.js 官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得灵活。
包含的功能:
* 嵌套的路由/视图表
* 模块化的、基于组件的路由配置
* 路由参数、查询等。。。
安装vue-router
vue-router 是一个插件包,所以也用npm/cnpm来安装,打开cmd,进入项目目录,输入命令: (npm install vue-router安装 --save-dev 保存到dev配置里)
npm install vue-router --save-dev
引入vue-router
安装成功后,在main.js中导入vue-router:
import VueRouter from 'vue-router'
显示声明使用VueRouter
Vue.use(VueRouter)
使用vue-router 实现页面跳转
新建一个Vue页面
新建一个router文件夹:新建router的主配置文件index.js
导入核心文件:vue 和 vue-router
import Vue from 'vue'
import Router from 'vue-router'
安装使用路由:
Vue.use(Router);
配置导出路由:
import Content from '../components/Content' //引入组件
export default new Router({
routers:[{
//路由路径
path:'/content',
component: Content //跳转的组件
}]
})
入口main.js修改路由引入router配置文件:
实现跳转
在页面中使用<router-link to='/content'>标签实现路由跳转 to属性实现路由跳转
<router-view></router-view> 路由组件展示
OK,vue-router路由跳转完成!