vue中路由的快速入门

1. 页面部分刷新路由模块

//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// import Home from '../components/home'
// import About from "../components/about";
// import user from "@/router/user";
const Home = () => import('../components/home')
const HomeMessage = () => import('../components/HomeMessage')
const HomeNews = () => import('../components/HomeNews')
const About = () => import('../components/about')
const user = () => import('../components/user')
const profie = () => import('../components/profie')

//1.使用插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes = [
    {
        path : '',
        redirect : '/home'
    },
    {
        path : '/home',
        component : Home,
        meta : {
          title : '首页'
        },
        children : [
            {
                path : '',
                redirect : 'news'
            },
            {
                path : 'news',
                component : HomeNews
            },
            {
                path : 'message',
                component : HomeMessage
            }
        ]
    },
    {
        path: '/about',
        component: About,
        meta : {
            title : '关于'
        }
    },
    {
        path:'/user/:id',
        component: user,
        meta : {
            title: '用户'
        }
    },
    {
        path : '/profie',
        component : profie,
        meta : {
            title: '档案'
        }
    }
]
const router = new VueRouter({
    //配置路由与组件之间的关系
    routes,
    mode : 'history',
    linkActiveClass : 'active'
})
router.beforeEach((to,from,next)=>{
    document.title = to.matched[0].meta.title
    next()
})

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

2.路由的页面体现

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index";

Vue.config.productionTip = false

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