Router路由的配置

Router路由的配置

• 1.安装router
• • 2.配置router
  • • 3.路由的使用

1.安装router

npm install vue-router --save

2.配置router

1.在src目录下创建router文件夹
2.在router文件下创建index.js文件
3.

//导入vue
import Vue from 'vue'
//导入路由
import VueRouter from 'vue-router'
//导入自己创建的vue文件
const Index = ()=>import('../views/Index')

Vue.use(VueRouter)

const routes = [
    {
    //刚加载时默认的路由
      path:'',
      redirect:'/index'
    },
    {
    //当Index发生时间时跳转路径
      path: '/index',
      component:Index
    }
    ]

//创建一个路由实例
const router = new VueRouter({
  routes,
  //当路由跳转时的模式为可以回退
  mode:'history'
})

export default router

3.路由的使用

import Vue from 'vue'
//导入主页面
import App from './App.vue'
//导入index.js文件里面的router实例
import router from "./router";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //使用router
  router
}).$mount('#app')

到此路由的使用到此结束