vue-router的安装和使用

路由配置

1. 安装 vue-router

npm install vue-router@4

2. 在app.vue的同级目录下创建router文件夹，并在其中创建index.js文件

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

const routes=createRouter({
    history:createWebHashHistory(), // 使用hash模式
    routes:[
        {
            path:'/',
            name:'home',
            component:()=>import('./views/Home.vue')  // 异步加载组件
        },
        {
            path:'/about',
            name:'about',
            component:()=>import('./views/About.vue')
        }，
                {
            path:'/contact',
            name:'contact',
            component:()=>import('./views/Contact.vue'),
            props:true  // 路由传参
        }
    ]
    ....  // 其他路由配置

})
  
export default routes  // 导出路由实例

3. 在main.js中导入路由实例并挂载到根实例上

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

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

4. 在App.vue中使用router-view组件渲染路由匹配到的组件

app.vue
<template>
    <router-view></router-view>
    ....
</template>

5. 导航方式

第一种：通过<router-link>组件进行导航
<template>
    <div>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-link to="/contact">Contact</router-link>
        <router-view></router-view>
    </div>
</template>

第二种：通过router实例编程式进行导航

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

//结合点击事件
const goback = () => {
    router.back();
}

const goHome = () => {
    router.push('/');    
}

router.push({ name: 'home' }); // 命名路由

router.push({ path: '/about' }); // 路径路由

// 带查询参数，结果是 /contact?name=张三
router.push({ path: '/contact', query: { name: '张三' } }); 

// 调用路由传参
router.push({ name: 'contact', params: { name: '张三' } });
....

---

router与route的区别

router 由createRouter()方法创建,用useRouter()方法使用

功能

• 导航：提供编程式导航方法，如 router.push(‘/path’) 或 router.replace(‘/path’)。
• 监听：可以监听路由变化，通过全局或组件级的导航守卫。

route 是一个对象，它表示当前激活的路由的状态信息，包括路径、查询参数、路由参数等，用useRoute()方法使用

path：当前路由的路径。
query：URL 查询参数的对象。
params：路由参数，如动态路径或命名视图。
name：路由名称（如果有）。
meta：路由元信息，用于存储额外的数据。

功能

• 数据绑定：根据路由参数动态渲染组件内容。
• 导航决策：基于路由信息进行条件渲染或逻辑处理。