Vue路由：Vue Router

Vue Router 介绍

Vue Router 是 Vue.js (opens new window) 官方的路由管理器。

核心深度集成，包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制

Vue Router 安装

npm install vue-router

创建src/router/index.js文件及目录，之后前端的路由都将维护在此文件中

route-view一定会出现在App.vue里面，它其实是路由占位符，页面的入口是App.vue，它的入口一定是主视图。

当你进入到某个路径的时候，这个路径会有一个对应的页面，它会将页面文件渲染到路由占位符当中，其实也就是将整个页面渲染到路由占位符当中。这就是前面说的将子组件渲染到App.vue的另外一种方式，用路由的方式。

先去定义好路由，定义好路由然后在APP.vue里面添加路由占位符

定义，创建路由：

import {createRouter, createWebHistory} from "vue-router"

//导入组件的方式1，先导入，下面引用
import HelloWorld from '@/components/HelloWorld.vue'

//定义路由规则
const routes = [
    {
        path: "/helloworld", //路由的路径
        name: "HelloWorld", //路由名称，会显示到侧边栏
        component: HelloWorld //引入视图组件，其实就是引入vue文件

    },
    {
        path: "/test",
        name: "Test",
        //导入视图组件的方式二，当路由被访问的时候，才会加载组件
        component: () => import('@/components/Test.vue')

    }

]

//2.创建路由实例并传递上面路由对象routes
    const router = createRouter({
//路由的一种前端展现方式，通常使用这个就行了
        history: createWebHistory(),
        routes
  }
)

//暴露出去
export default router

去App.vue里面添加路由占位符

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

去main.js里面去导入路由

import { createApp } from 'vue'
import App from './App.vue'
import Test from '@/components/Test.vue'

import router from '@/router'

const app =createApp(App)
//使用vue路由
app.use(router)
app.component('Test',Test)
app.mount('#app')

主页面是空白的，因为是没有定义这个路由，其次app.vue里面没有任何东西了。

上面其实就是路由和VUE文件去做了匹配。

route-link就像超链接一样，

<template>
<!-- 使用router-link组件来导航 -->
<!-- 通过传入 to 属性制定链接 -->
<!-- router-link 默认会被渲染成一个a标签 -->

  <router-link to="/test">Test</router-link>
  <br>
  <router-link to="/helloworld">HelloWord</router-link>
  <router-view></router-view>

</template>

路由传参

URL传参：一般用于页面跳转，将当前数据传递到新页面，例如详情页

params 传参路径包含了参数

配置路由： {path: ‘/user/:id’, component: about}

传递方式：传递后路径：/user/6

接收参数： $route.params.id

query 传参？后面

配置路由： {path: ‘/user/’, component: about}

传递方式：传递后路径：/user?id=6

接收参数： $route.query.id

<template>
  <router-link to="/test?name=lucas">Test</router-link>
  <br>
  <router-link to="/helloworld">HelloWord</router-link>
  <router-view></router-view>
  <!--@是监听事件的，它就是监听childmsg的一个事件-->
  <!--<Test v-bind:name="name" :content=content  @childMsg="receive"></Test>-->
</template>

新的页面就可以通过$route.query.name就可以取值了。

路由传参

猜你喜欢