vue-router路由基本配置

vue提供了vue-router路由，来实现页面的跳转。vue-router可以直接在项目的main.js中引入使用，但是在实际开发中，单独拿出来配置使用的更多。

1.安装vue-router插件

项目目录下执行命令

npm install vue-router --save

2.vue-router目录结构

项目目录src下新建文件夹router，新建基本配置文件index.js

3.引入vue-router

index.js中引入vue-router，必须要通过 Vue.use() 明确地安装路由功能

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter);

4.定义（引入）路由组件

const Home = ()=>import('@/views/home/Home.vue')  //引入组件

const Category = ()=>import('@/views/category/Category.vue')

5.定义路由

const routes=[

    {

        path:'/',         //默认路径

        redirect:'home'    

    },

    {

        path:'/home',

        component:Home

    },

    {

        path:'/category',

        component:Category

    }

]

6.创建router实例

const router = new VueRouter({

    routes,       // (缩写) 相当于 routes: routes

    mode:'history'     //history模式下，路径中不会有#

});

export default router

7.挂载根实例

项目根目录main.js中配置

import router from './router/index'       //引入router的index.js文件

new Vue({

  router,                          //挂载到根实例

  render: h => h(App),

}).$mount('#app')