安装

对于一个现有的使用 JavaScript 包管理器的项目，你可以从 npm registry 中安装 Vue Router：

npm install vue-router@4

创建路由实例

@/router/index.vue

import {createRouter,createWebHistory} from 'vue-router'

const routes = [{
		path: '/',
        alias:['/home','/index'],//别称
		component: () => import('../views/index.vue')
	},
	{
        //http://localhost:5173/content?name=lis&age=23    {{$route.query}}
		path: '/content',  
		component: () => import('../views/content.vue')
	},
	{
        //http://localhost:5173/userdate/lis/nest/[23]  {{$route.params}}
		path: '/userdate/:name/next/:age?',  
        name:'date',
		component: () => import('../views/userdate.vue')
	}
]

const router = createRouter({
	history: createWebHistory(),
	routes
})

export default router

编程式导航

	// 字符串路径
    router.push('/users/eduardo')

    // 带有路径的对象
    router.push({ path: '/users/eduardo' })

    // 命名的路由，并加上参数，让路由建立 url
    router.push({ name: 'user', params: { username: 'eduardo' } })

    // 带查询参数，结果是 /register?plan=private
    router.push({ path: '/register', query: { plan: 'private' } })

    // 带 hash，结果是 /about#team
    router.push({ path: '/about', hash: '#team' })

注册路由器插件

mian.js

const app = createApp(App)
app.use(router)
app.mount('#app')

嵌套路由

const routes = [
  {
		path: '/vip',
		component: () => import('../views/vip.vue'),
		children:[
			{
                // 当 /vip 匹配成功
                // default.vue将被渲染到 vip 的 <router-view> 内部
				path:'',
				component: () => import('../views/vip/default.vue')
			},
			{
				path:'order',
				component: () => import('../views/vip/order.vue')
			},
			{
				path:'info',
				component: () => import('../views/vip/info.vue')
			},
			
		]
	},
]

重定向

{
		path:'/home',
		redirect:{name:'userdate',params:{name:'aa',age:35}}
		// redirect:'/index'
}

全局前置导航守卫

每个守卫方法接收二个参数：

• to: 即将要进入的目标

• from: 当前导航正要离开的路由

• next :可选的第三个参数

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})