router

位置: src下的router文件

安装和设置路由

导入mian.js, , 并使用 app.use(router)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import{createRouter, createWebHistory,createWebHashHistory} from 'vue-router'

const routes = [
    {
        path: '/',
        component: () => import ("../views/index.vue")
    },
]

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

export default router

配置路径别名

打开vite.config.js文件
导入 import path from 'path'

添加

1
2
3
4
5
6
7
8
9
10
11
12
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), ],
  resolve: {
    alias: { //配置路径别名
      '@': path.resolve(__dirname, 'src')
    }
  }
})

在src根目录下添加 jsconfig.json文件 (针对js项目, ts需要写tsconfig.json)
并配置

1
2
3
4
5
6
7
8
{
    "compilerOptions": {
        "baseUrl":".",
        "paths": {
            "@/*":["src/*"]//配置@符号指向src目录及其子目录
         }
    }
}

使用查询字符串传递参数

动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。我们可以在 vueRrouter 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。

  • 动态路由的创建，主要是使用 path 属性过程中，使用动态路径参数，路径参数 用冒号 : 表示。

当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.query 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：

1
2
3
4
5
6
7
const routes = [
  {
    path: '/user/:id'
    name: 'User'
    components: User
	}
]

****_vue-router _**通过配置 **_params _**和 **_query _来实现动态路由

params 传参

  • 必须使用 命名路由 name 传值

  • 参数不会显示在 url 上

  • 浏览器强制刷新时传参会被清空

1
2
3
4
5
6
7
8
9
10
// 传递参数
this.$router.push({
  name: Home，
  params: {
    number: 1 ,
    code: '999'
  }
})
// 接收参数
const p = this.$route.params

query 传参

  • 可以用 name 也可以使用 path 传参
  • 传递的参数会显示在 url 上
  • 页面刷新是传参不会丢失
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 方式一：路由拼接
this.$router.push('/home?username=xixi&age=18')

// 方式二：name + query 传参
this.$router.push({
  name: Home，
  query: {
    username: 'xixi',
    age: 18
	}
})


// 方式三：path + name 传参
this.$router.push({
  path: '/home'，
  query: {
    username: 'xixi',
    age: 18
	}
})

// 接收参数
const q = this.$route.query

定义别名

借助 alias

1
2
3
4
5
6
7
8
9
    {

        path: '/',

        alias: ['/home', '/index'],

        component: () => import ("@/views/index.vue")

    },

注意: 访问时, ‘/‘, ‘/home’, ‘inedx’, 都可以进入到 index.vue页面

router-link 的本质是 a 标签，在标签上绑定了click事件，然后执行对应的VueRouter实例的push()实现的

router-view 组件渲染

组件渲染的关键在于 router-view ，将路由变化时匹配到的组件进行渲染。 routerView是一个函数式组件，函数式组件没有data，没有组件实例。 因此使用了父组件中的$createElement函数，用以渲染组件，并且在组件渲染的各个时期注册了hook 如果被 keep-alive 包裹则直接使用缓存的 vnode 通过 depth 实现路由嵌套， 循环向上级访问，直到访问到根组件，得到路由的 depth 深度

全局前置守卫

在main.js中写

1
2
3
4
5
6
7
8
9
10
11
12
13
router.beforeEach((to, from, next) => {

    console.log("to", to) //即将进入路由的信息

    console.log("from", from) //即将离开路由的信息

	if(to.name === 'number) {
		next(false) //拦截
	} else {
		next() //继续
	}

})