vue3+router4的基本使用

一、安装router

npm i vue-router

二、路由跳转

2.1 创建路由实例

在src目录下创建router文件夹，在其中创建一个index.js文件，创建路由实例。
通过vue-router的createRouter方法创建一个router对象。其中有history和routes

1.history：

• history是前端路由库提供的一个对象，负责管理浏览器历史记录的状态和导航。
• 它可以通过push、replace、go等方法来控制浏览器的历史记录。并相应地更新当前页面的显示内容。
• history对象根据所使用的路由类型不同，可以是浏览器原生的window.history，也可以是createBrowserHistory、createHashHistory等函数创建的自定义对象。

2.routes：

• routes表示路由配置，指定了不同URL对应的组件及其其他属性。
• 路由配置一般以树状结构的方式组织，每个路由都包含一个路径（path），和对应的路由组件（component）。
• 在路由系统中，可以根据匹配到的URL路径来渲染相应的组件，从而实现页面的切换和导航。
• 通过配置不同的路由规则，可以构建出应用程序的不同页面和导航逻辑。

src/router/index.js

/**
 *  路由文件
 */
 //引入router
import {
    
     createRouter, createWebHistory } from 'vue-router'

// 定义路由组件路径
/*
	这里的path和name都是自定义命名
*/
const routes = [
          {
    
    
              name: 'login',  
              path: '/login',
              component: () => import('../components/login.vue')
           }, {
    
    
              name: 'registry',
              path: '/registry', 
              component: () => import('../components/registry.vue')
           }
];

// 创建Router对象
const router = createRouter({
    
    
    history: createWebHistory(),
    routes
})

// 导出对象

export default router;

2.2 挂载路由实例

main.js

import {
    
     createApp } from 'vue'
import App from './App.vue'
// 引入全局路由
import router from './router'

const app = createApp(App)

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

2.3 创建页面组件

login.vue

<template>
    <div class="login">
       <h1>我是login页面</h1>
    </div>
</template>
export default {
    
    
    name: 'login',
    setup() {
    
    
        return {
    
    
        }
    }
}

registry.vue

<template>
  <div>
    <h1>我是registry页面</h1>
  </div>
</template>
export default {
    
    
    name: 'registry',
    setup() {
    
    
        return {
    
    
        }
    }
}

2.4 通过router-link跳转

在Vue Router中，<router-view>是用作路由占位符的组件。它是被放置在Vue应用模板中的一个特殊标记，用于渲染当前活跃的路由组件。当使用Vue Router进行路由管理时，你可以在路由配置中定义不同的路径与对应的组件。当用户访问不同的路径时，<router-view>会自动根据当前路径匹配到的组件来展示内容。
<router-view>可以将路由地址和组件映射起来，可以使用<router-link>来进行页面跳转。它的to属性，能够跳转到对应的path，从而展示path下的component组件。

App.vue

<template>
  <h1>路由跳转</h1>
  <div>
    <!-- 通过路由name、path完成跳转 -->
    <router-link :to="{name:'login'}">login</router-link>
    <span>------------</span>
    <router-link to="/registry">registry</router-link>
    <router-view ></router-view>
  </div>
</template>

2.5 通过js方法跳转

<script setup>
import {
    
     useRouter} from 'vue-router'

  const router = useRouter(); 
  
  // 通过路由path跳转
  const toLink = (path) => {
    
    
      router.push(path)
  }
  // 通过路由name跳转
  const toLink1 = (name) => {
    
    
  router.push({
    
    name:name})
  }  
  </script>
<template>
  <div class="btn">
    <!-- 通过js方法完成路由跳转 -->
    <button @click="toLink('/login')">按钮1--->login</button>
    <button @click="toLink1('registry')">按钮2--->registry</button>
 </div>
</template>

三、路由传参

3.1 query

<script setup>
import {
    
     useRouter,useRoute } from 'vue-router'
  
  const router = useRouter();
  const route = useRoute();
  // 通过路由传参
  const toLink2 = (path) => {
    
    
    router.push({
    
    
      name: path,
      query:{
    
    name:'zhangsan',pwd:'123456'}
    })
      // 截取路由参数
  		console.log(rouet.query);
}
  </script>

<template>
  <h1>路由传参</h1>
  <div class="btn">
    <!-- 通过路由传参 -->
    <button @click="toLink2('registry')">to registry</button>
  </div>
</template>

3.2 params

先修改path的值，再用params传参
router/index.js

 {
    
    
      name: 'login',
      path: '/login',
      component: () => import('../components/login.vue')
 }, {
    
    
      name: 'registry',
      path: '/registry/:name', // 使用param需要修改path的形式
      component: () => import('../components/registry.vue')
 }

App.vue

<script setup>
import {
    
     useRouter,useRoute } from 'vue-router'
  
  const router = useRouter();
  const route = useRoute();

  // 通过路由传参
   const toLink3 = (path) => {
    
    
     router.push({
    
    
       name: path,
       params:{
    
    name:'lisi'}
     })
     console.log(route.params);
  } 
  </script>

<template>
  <h1>路由传参</h1>
  <div class="btn">
    <!-- param -->
    <button @click="toLink3('registry')">param</button>
  </div>
</template>

四、路由嵌套

Vue的路由嵌套指的是在一个路由配置中，将多个子路由组织成一个层级结构。这样可以更好地管理和组织复杂的应用程序页面。要创建嵌套路由，需要再父路由中定义子路由，并在组件内部使用<router-view>标签来显示子路由的内容。

/**
 *  路由文件
 */
 //引入router
import {
    
     createRouter, createWebHistory } from 'vue-router'

// 定义路由组件路径
const routes = [
    {
    
    
        path: '/',
        redirect: {
    
     path: '/home' }, // 重定向到path为 home 的路由
    },
    {
    
    
        name: 'home',
        path: '/home',
        component: () => import('../components/home.vue'),
        children: [
            {
    
    
                name: 'login',
                path: '/home/login',
                component: () => import('../components/login.vue')
            }, {
    
    
                name: 'registry',

                path: '/home/registry', 
                component: () => import('../components/registry.vue')
            }
        ]
    },
   
];

home.vue

<template>
   <div>
    <div>导航栏组件</div>
      <hr>
      <router-link to="/home/login">去login页</router-link>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <router-link to="/home/registry">去registry页</router-link>
      <hr>
      <router-view /> 
    </div>
</template>

App.vue

<script setup>
 </script>

<template>
  <h1>嵌套路由</h1>
  <router-view ></router-view>
</template>

五、路由重定向

在Vue Router中，路由重定向是指当用户访问某个路径时，将其重定向到另一个路径。这可以通过路由配置中的redirect属性来实现。

const routes = [
  {
    
    
    path: '/',
    redirect: '/home' // 当用户访问根路径'/'时，重定向到'/home'
  },
  {
    
    
    path: '/home',
    component: Home
  }
]