Vue3项目使用路由

Vue3项目使用路由

 

安装

 npm install vue-router@4

 

进行初始化配置

router->index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
​
const routes: RouteRecordRaw[] = [
    {
        path: "/login",
        name: "login",
        component: () => import("../views/login/index.vue"),
        children: []
    }, {
            .....
    },  
            .....
]
​
const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
})
​
export default router;

• 就完成了最基础的路由定义格式

 

项目关联路由

src->main.ts

...
import router from './router'
...
​
createApp(App).use(router).mount('#app')

• 需要让项目绑定上我们定义了的路由仓库

   

因为项目中不仅仅只有router需要绑定到 app 之上,所以我们对写法进行一些优化

....
​
import router from './router'
​
const app=createApp(App)
​
app.use(router)
app.mount('#app')

• 让一个对象app来接收全部的 createApp(App) 所绑定的方法

 

视窗设置

当路由完成后还需要给路由一个视窗来展示路由内容

<template>
  <router-view></router-view>
</template>

 

路由优化

最基础的路由使用方式会将整个 router 对象全部导出到项目当中, 此时我们可以将路由的导出方式转化成需求导出,需要什么再进行导出指定路由而不是一下子导出一整块

 

代码的变化

src=>main.ts

import router from './router'
///  改变为  ///
import { initRouter } from "./router"

• 因为在优化的情况下,我们想将 路由初始化自定义方法 导出,而不是导出整个路由

• 再根据 路由初始化自定义方法 来找到相对应的路由交到组件中

app.use(router)
///  改变为  ///
initRouter(app)

• 不再是直接使用 router ,而是通过 自定义方法-initRouter

router->index.ts

export default router;
///  改变为  ///
export function initRouter(app: App<Element>) {
    app.use(router)
}

• 导出的是路由初始化的自定义方法,而不再是直接将整个路由导出了

• 路由初始化自定义方法 需要传递进来的是整个 app参数

  原因: 因为app在用路由,且这步就是将 app.use(router)从main.ts搬到路由中而已

• app需要引入其来源, 类型约束 App<Element> 是组件自带的

  import { App } from "vue";

   

组件中使用路由

import { useRouter } from "vue-router";
const router = useRouter();

• 组件中使用路由是使用 vue自带方法进行导入

router.push("/user/cartList")

• 区别于 vue2 ,不再需要使用 this.$router 了

•