一、直接在main.js文件中配置
1.安装路由
cnpm install vue-router --save-dev
安装后package.json中出现如图所示vue-router配置,即为安装成功
2.在main.js中new Vue中配置router
new Vue({
el: '#app',
router, //一定注意要在此处配置,不配置会出现如下图错误
render: h => h(App)
})
3.在 main.js中引用路由
import vueRouter from "vue-router" ; //vueRouter为自定义变量名
4.在main.js中注册
Vue.use(vueRouter);
5.引入路由组件
import Home from "./component/fourpage/home"
6.配置路由
let router=new vueRouter({
routes:[{ //注意此处为 routes
path:"/", //显示的路径,在浏览器地址栏默认显示 /#
component:Home //该路由从Home组件开始跳转
})
为使浏览器地址栏默认显示 “/”,可在main.js中做如下配置
let router=new vueRouter({
mode:"history";
})
7.在跳转的组件内配置路由入口
<router-link :to="address">{{value}}</router-link>
//router-link 编译后相当于一个跳转地址为address的 a 链接
//router-link 标签必须设置“to”属性,“to”属性值为跳转的路径
8.在跳转后显示内容的组件内配置路由出口
<router-view></router-view>
二、封装路由模块,在所需文件引用
- 安装,同上;
- 建立router.js文件,并引入配置
//引入vue
import Vue from "vue";
//引入路由模块
import vueRouter from "vue-router";
//路由与Vue关联
Vue.use(vueRouter);
//配置路由
let routers=[];
//实例化路由对象
let router = new vueRouter({
routers, //配置的路由
mode:"history" //默认的浏览器地址
});
//暴露出路由对象
export default router;
- 在main.js中引入路由对象,并配置
//引入路由对象
import Router from "./router/router"
new Vue({
el: '#app',
router: Router, //配置路由
render: h => h(App)
})