安装和使用vue-router

安装：npm install vue-router --save

 

使用：

1.src文件夹下创建router文件夹，router里新建index.js文件（src-->router-->index.js）

2.配置路由相关信息：

import VueRouter from 'vue-router'

import Vue from 'vue'

 

3.index.js里通过Vue.use(插件),安装插件

Vue.use(VueRouter)

4.创建VueRouter对象

// 配置路由和组件之间的应用关系

 

　const Home = () => import('@/views/home')

 

　const About = () => import('@/views/about')

const routes = [
　　// 初次加载重定向到首页
　　{
　　　　path:'',
　　　　// 用路由懒加载：打包构建应用时，js包会变的非常大，影响页面加载。这时把不同路由对应的组件分割成不同的代码块，当路由访问的时候再加载对应的组件，这样就更加高效
　　　　redirect:Home
　　},
　　{

　　　　path:'/home',
　　　　component:Home
　　},
　　{
　　　　path:'/about',
　　　　component:About
　　}

]

const router = new VueRouter({
    routes
})

5.将router对象传入到vue实例中

main.js中

new Vue({
    el:'App',
    router, // 将router对象传入到vue实例中
　　 mode:'history', // 之前为hash模式，有#；修改为html5的history模式
    render: h => h(App)
})

 6.App.vue中

<template>
    <div  id="app">
        // router-link是vue中注册好的
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
　　　　　// router-view决定渲染好的组件放到什么位置--占位
　　　　　<router-view></router-view>
    </div>
</template>