总结vue项目的rouer的使用_使用 vue row-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38401285/article/details/85250397

本文详细介绍了Vue项目中如何使用vue-router，包括安装、导入、实例化、配置路由、路由懒加载以及各种路由钩子函数的用法。特别讨论了`this.$router`与`this.$route`的区别，并提供了多个示例来展示它们在实际应用中的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// npm install vue-router 安装路由

//引进
import Vue from 'vue';
import VueRouter from 'vue-router';
// import demo from '../page/demo'
const demo = () => import('../page/demo');
import HelloWorld from '../page/HelloWorld';
import filter from '../page/filter';
import minixs from '../page/minixs';
//使用
Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {
            path:'/demo',
            name:'demo',
            // component: () => import('../page/demo')
            component:demo,
            meta:{
                title:'实例'
            },
            // 单个路由钩子
            beforeEnter: (to, from, next) => {
                window.console.log(to)
                window.console.log(from)
                next()
            }
        },
        {
            path:'/helloWorld',
            name:'HelloWorld',
            // component: () => import('../page/demo')
            component:HelloWorld
        },
        {
            path:'/filter',
            name:'filter',
            component:filter
        },
        {
            path:'/minixs',
            name:'minixs',
            component:minixs
        }
    ]
});
//全局路由钩子
// router.beforeEach((to, from, next)=>{
//     // 会在任意路由跳转之前执行，next()一定要执行，不然路由不跳转
//     window.console.log('to',to)
//     window.console.log('from',from)
//     next()
// })
export default router
/*
1、this.$router与this.$route的区别
this.$router是vue-router的一个实例，是一个全局路由管理器。包含push(),go()等方法以及子对象等
this.$route是指当前正在跳转的路由，包含path、name、query、params等属性

2、配置路由：引进vue vue-router 并且Vue.use(vueRouter)
import Vue from 'vue'
import vueRouter from 'vue-router'
Vue.use(vueRouter)

3、实例化一个路由对象
const router = new vueRouter({
 routes:[
  {.......}
 ]
})

4、导出路由对象 export {router}  或者 export default router

5、引进进行路由跳转的组件
import demo from '@/components/demo'    @表示同级路径
然后在routes:[
  {
    path:'/demo',
    name:'demo',
    component:demo      //注意component是没有s的
  }
]

6、在main.js中做配置
main.js:
import vueRouter from 'vue-router' //引入vue-router并且use
Vue.use(vueRouter)

import router from './router/index'   //引入router文件夹下的index.js 后面是文件路径

new Vue({
 router,   //最后一步，记得挂载在根组件下
 render: h => h(App),
}).mount('#app')

7、路由懒加载，当路由被访问时才加载
const demo = () => import('./page/demo')
const router = new vueRouter({
  routes:[
   {
     path:'/demo',
     name:'demo',
     component:demo
   }
  ]
})
或者写成：
const router = new vueRouter({
  routes:[
   {
     path:'/demo',
     name:'demo',
     component:()=>import('./page/demo')
   }
  ]
})

8、beforeRouteEnter (to, from, next){
   // 路由组件钩子
}
总结：常用的：全局路由钩子，每个路由都要经过的beforeEach()
单个路由钩子beforeEnter()
组件路由钩子 beforeRouterEnter()
* */