从零配置路由
1.安装 npm install vue-router@4 2.创建router文件夹并且创建index.js
- import about from '../components/16p__router/about.vue'
- import home from '../components/16p__router/home.vue'
-
- import { createRouter,createWebHashHistory,createWebHistory } from 'vue-router'
-
- //配置映射关系
- const routes = [
- { path:"/",component: home },//默认，一般不这么做
- { path:"/",redirect: '/home' },//默认路径重定向
- { path:"/home",component: home },
- { path:"/about",component: about },
- ]
-
- //创建路由对象router
- const router = createRouter({
- routes,
- history: createWebHistory() //使用history模式
- })
-
- //导出路由对象
- export default router
- 回到main.js对router进行使用
- import { createApp } from 'vue'
- import router from './router'
- import App from './App.vue'
-
- // createApp(App).use(router).mount('#app') //第一种链式调用写法
-
- const app = createApp(App);//第二种写法，分开来，拿到createApp的返回值
- app.use(router) //app.use 可以用来安装插件,把router进行一个使用
- app.mount('#app')
4.在App.vue使用内部组件router-view占位组件
- <router-link to="/about">about</router-link>
- <router-link to="/home">home</router-link>
- <router-view></router-view>
-
router-link属性
- to //跳转到哪个页面
- replace //压栈操作，不允许返回，使用时直接给属性即可
- active-class //可以修改class的名字
-
路由懒加载和魔法注释（打包文件命名）
- //配置映射关系
- const routes = [
- { path:"/",redirect: '/home' },//默认路径重定向
- { path:"/home",component: import },
- { path:"/about",component: about },
- { path: '/user/:user', component: () => import(/* webpackChunkName:"MyUser-chunk" */ '../components/MyUser.vue') },
- ]
7.映射关系的属性补充
- name //取名字，很少用
- meta：{} //可以传递一些自定义的数据，在组件里的this.$route里可以拿到
8.动态路由（跟上用户名） // 匹配上才显示组件
- index.js (router文件夹下)
- { path: '/user/:user', component: () => import('../components/MyUser.vue') },
-
- App.vue //可传递userName给子组件
- <router-link :to="'/user/'+ userName">MyUser</router-link>
-
- 子组件MyUser.vue //可在this.$route里拿到数据
- created() {
- console.log(this.$route.params.user)
- },
- vue3 如何在setup函数拿到$route的值
- import { useRoute } from "vue-router"
- setup(){
- const route = useRoute();
- }
10.当找不到路径，配置Not found组件
- {
- path:"/:pathMatch(.*)",
- component: () => import('../components/NotFound.vue' )
- },
11.嵌套路由
- {
- path: "/home",
- component: () => import('../components/NotFound.vue' )，
- children: [
- {
- path: 'homeContent', //不需要/以及前缀
- component: () => "../xx"
- }
- ]
- }
- $router
- <router-link @click="fn"></router-link>
- fn(){
- this.$router.push('/home') //replace替换,go(1/-1)前进/后退一步
- }
- fn(){
- path: "/about",
- query: { //赋予查询字符串query
- name: "xx",
- age: "xx"
- }
- }
- 取出$route.query
- 动态添加路由 在index.js
- //动态添加路由
- const categoryRoute = {
- path: "category",
- component: () => import("../components/16p/About.vue")
- }
- //添加顶级路由对象，第二种方法
- router.addRoute(categoryRoute)
-
- //添加二级路由对象
- router.addRoute("home",{
- path: "category",
- component: () => import("../components/16p/About.vue")
- })
- 动态删除路由
- 添加一个name相同的路由
- 通过removeRoute方法，传入路由名称
- 通过addRoute方法的返回值回调
- 路由导航守卫
- 在index.js里
- let counter = 0;
-
- //路由导航守卫,to是即将跳转的router对象，从哪个路由对象导航过来的from
- router.beforeEach((to,form) => {
- console.log(`拦截了${++counter}次`)
- if(to.path !== "/abb"){
- const token = window.localStorage.getItem("token")
- console.log('token',token)
- if(!token){
- return "/abb"
-
- }
- }
-
- 在登录页面的methods里
- btnlogin() {
- //本地存储一个token，确保已经登录了
- const token = window.localStorage.setItem("token", "abc"); //给token赋值abc
- router.push({
- path: '/home'
- })
- },
