路由配置

• 安装路由

使用npm install vue-router进行安装。

路由基础

// 1. 引入 vue
import Vue from 'vue'

// 2. 引入 vue-router
import VueRouter from 'vue-router'

// 3. 引入需要用到的路由页面组件
import PageA from './views/PageA.vue'
import PageB from './views/PageB.vue'

// 4. vue-router 是 vue 的插件，需要使用 Vue.use() 方法去调用插件
Vue.use(VueRouter)

// 5. 定义路由规则 routes
const routes = [
  {
    path: '/a',
    component: PageA
  },
  {
    path: '/b',
    component: PageB
  }
]

// 6. 实例化 vue-router
const router = new VueRouter({
  routes: routes
})

// 7. 暴露 实例对象
export default router

路由综合应用

import VueRouter from 'vue-router'
import Vue from 'vue'

//非懒加载路由
// import Home from '../components/content/Home';
// import About from '../components/content/About';
// import User from '../components/content/User';


//懒加载路由
const Home =()=>import('../components/content/Home.vue');
const HomeNews=()=>import('../components/content/HomeNews.vue');
const HomeMessage=()=>import('../components/content/HomeMessage.vue');
const Profile =()=> import('../components/content/Profile.vue')
const About =()=>import('../components/content/About.vue');
const User =()=>import('../components/content/User.vue');
//1. 通过Vue.use(插件),安装插件
Vue.use(VueRouter);

//2. 创建VueRouter对象

// const  routes=[{
//         path:'',
//         //重定向
//         redirect:'/home'
//         },
//         {
//             path:'/home',
//             component:Home
//         },
//         {
//                 path:'/about',
//                 component:About
//         },
//         {   //动态添加路由路径
//             path:'/user/:userId',
//             component:User
//         }]
//路由懒加载
const routes = [{
    path:'',
    //重定向
    redirect:'/home'
    },
    {
        path:'/home',
        component:Home,
        children:[//子路由的设置//嵌套路由
            {
                path:'',
                redirect:'news'
            },
            {
                path:'news',
                component:HomeNews
        },{
            path:'message',
            component:HomeMessage
        }]
    },
    {
            path:'/about',
            component:About
    },
    {   //动态添加路由路径
        path:'/user/:userId',
        component:User
    },{
        path:'/profile',
        component:Profile
    }]
const router = new VueRouter({
    //配置路由和组件之间的应用关系
    routes,
    mode:'history',//H5模式的hash值 默认值为hash哈希值
    linkActiveClass:'laowang'//动态路由改变名字,活跃的组件就添加这个名字
})

// 3.将router对象传入到vue实例
export default router