vue_cli3.0路由配置

前提：在新建工程时初始化选项已经安装了vue-router,以下为配置路由过程

1.router下面的index.js文件

import Vue from 'vue'	//引入vue
import VueRouter from 'vue-router'	//引入vue-router模块
import routes from '../routers'	//引入路由配置文件(详见下方routes.js配置)
Vue.use(VueRouter)	//声明安装路由

const router =  new VueRouter({
    
    
  mode: 'hash', // history
  routes
})	//返回实例


export default router

2.在src目录下新建page文件夹，在文件夹下面新建Home.vue和Error.vue文件

这里我是将有路由的页面都放在page文件夹里面，方便管理

3.在src目录下新建routers,js文件

//组件模块
import error from './page/Error'
import home from './page/Home'

//配置路由，path就是你浏览器地址，component就是跟着你要显示的页面，/表示默认地址。
export default [
	{
    
    
    //主页
    path:"/",
    component:home
  },
  {
    
    
    //主页
    path:"/error",
    component:error
  },
]

4.App.vue里面把原有的router-link去掉，只留下router-view

因为创建时已经安装好了vue-router,所以main.js中已经引入了，就不用重新编写
main.js文件

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
    
    
  router,
  store,
  render: h => h(App)
}).$mount("#app");

5.完成，打开url，默认为Home页面

6.router-link:路由跳转

<router-link>默认渲染为一个<a>标签

假如我们想把<router-link>渲染成其他标签，可修改其属性tag，如：

<router-link to="/login" tag=“span”>登陆</router-link>

 <router-link to="/register">注册</router-link>