vue路由配置

 配置路由 

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

path是访问路径。

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

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

路由目标需要导入

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上

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中显示的内容

<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>

组件内调用路由

传递参数

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

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

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

在目标组件内使用变量:

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

// 获得useRoute实例
const route = useRoute()
      <RouterLink to="/about/1/qwe">
        链接
      </RouterLink>

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

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

多值传递 

同上

多个路由

嵌套路由配置

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

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

命名视图配置

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值