Vue Router相关理解

vue-router是vue的一个插件库，专门用来实现SPA应用

SPA应用的理解

单页Web应用（single page web application,SPA）

整个应用只有一个完整的页面

点击页面中的导航链接不会刷新页面，只会做页面的局部刷新

数据需要通过ajax请求获取

路由理解

基本路由

安装vue-router，命令npm i vue-router@3 （后面加@3原因是我使用的是vue2）

应用插件Vue.use(VueRouter)

编写router配置项src/router/index.js

import VueRouter from 'vue/router'          //引入VueRouter
import About from '../components/About'     //引入路由组件
import Home from '../components/Home'       //引入路由组件

//创建router实例对象，去管理一组一组的路由规则
const router=new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
    ]  
})

//暴露router
export default router

实现切换浏览器会被替换为a标签 active-class可配置高亮样式

About

指示展示位 

案例

src/main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'  //引入VueRouter
import router from './router'    //引入路由器
Vue.config.productionTip = false

Vue.use(VueRouter)
//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    router:router
})

src/router/index.js

import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

src/App.vue

src/components/About.vue

src/components/Home.vue

public/index.html

注意事项

import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

 

多级路由

src/pages/Home.vue

src/pages/News.vue

src/pages/Message.vue

src/router/index.js

import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        }
    ]
})