vue路由配置 - 技术栈

配置路由

打开src下的router下的index.js文件夹，在routes中添加配置。

path是访问路径。

name是路由的名字，在项目内部使用。

component是路由目标，也就是要展示的页面。

路由目标需要导入

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'     // 导入配置路由的工具
import HomeView from '../views/HomeView.vue'                    // 导入组件
import Search from '../views/Search.vue';

// 创建路由对象
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 配置路由地址，一组对象表示一个目标
  routes: [   
    {
      path: '/',          // 目标地址ss
      name: 'home',       // 路由名
      component: HomeView // 路由目标
    },
    {
      path: '/about/:id/:type',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/search',
      name: 'search',
      component: Search
    }
  ]
})

//对外暴露路由
export default router

挂载路由

打开main.js，将router文件挂载到app上

javascript 复制代码

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vant from 'vant'
import 'vant/lib/index.css'

const app = createApp(App)

app.use(router)
app.use(Vant)

app.mount('#app')

使用路由

打开app.vue

RouterView标签是要显示的内容，也就是index.js中component指向的目标。

RouterLink标签类似a标签，用于操控RouterView中显示的内容

html 复制代码

<script setup>
// useRoute可以获取路由中携带的数据
import { RouterLink, RouterView ,useRoute} from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import HomeView from "@/views/HomeView.vue";

// 获得useRoute实例
const route = useRoute()	
</script>

<template>


	<!-- 通过该标记显示路由地址指向组件的内容 -->
	<RouterLink to="/"> Home</RouterLink>
	<!-- RouterLink类似于a标记可实现页面跳转，该标记支持路由地址匹配，to属性为匹配地址目标 -->	
	<RouterLink to="/search"> search</RouterLink>
	<RouterView />
</template>

<style lang="lcss" scoped>

</style>

组件内调用路由

传递参数

传递参数有两种方法，一是作为链接的一部分传递，二是通过链接后的参数传递。

javascript 复制代码

    {
      path: '/about/:id/:type',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }

这样就有id和type两个变量了

在目标组件内使用变量：

javascript 复制代码

import { ref } from 'vue';
import { useRoute } from 'vue-router'

// 获得useRoute实例
const route = useRoute()

html 复制代码

      <RouterLink to="/about/1/qwe">
        链接
      </RouterLink>

在目标组件中使用可以访问变量，其中params找的是网址的组成部分，query找的是？后跟的参数。

html 复制代码

{{ route.params.id }}
{{ route.params.type }}
{{ route.query.name }}

多值传递

同上

多个路由

嵌套路由配置

javascript 复制代码

const router = new VueRouter({  
  routes: [  
    {  
      path: '/parent',  
      component: ParentComponent,  
      children: [  
        {  
          path: 'child',  
          component: ChildComponent  
        }  
      ]  
    }  
  ]  
});

在这个例子中，当用户访问 /parent/child 路径时，ChildComponent 会被渲染到 ParentComponent 中的 <router-view>。

命名视图配置

javascript 复制代码

const router = new VueRouter({  
  routes: [  
    {  
      path: '/',  
      components: {  
        default: DefaultComponent,  
        sidebar: SidebarComponent  
      }  
    }  
  ]  
});

在这个例子中，当用户访问 / 路径时，DefaultComponent 会被渲染到默认的 <router-view>，而 SidebarComponent 会被渲染到名为 sidebar 的 <router-view>。