Vue--路由的安装与配置

一、直接在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>

二、封装路由模块，在所需文件引用

1. 安装，同上；
2. 建立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;

3. 在main.js中引入路由对象，并配置

//引入路由对象
import Router from "./router/router"
new Vue({
  el: '#app',
  router: Router,    //配置路由
  render: h => h(App)
})