Vue route: Vue Router

Introduction to Vue Router

---

Vue Router is the official routing manager for Vue.js (opens new window) .

Core deep integration, including the following functions:

• Nested routing / view tables
• Modular, component-based routing configuration
• Route parameters, queries, wildcards
• View transition effect based on Vue.js transition system
• Fine-grained navigation control

Vue Router installation

---

npm install vue-router

Create the src/router/index.js file and directory, and then the front-end routing will be maintained in this file

The route-view will definitely appear in App.vue. It is actually a route placeholder. The entry of the page is App.vue, and its entry must be the main view.

When you enter a certain path, this path will have a corresponding page, which will render the page file into the route placeholder, in fact, it will render the entire page into the route placeholder. This is another way to render subcomponents to App.vue mentioned earlier, using routing.

First define the route, define the route and then add the route placeholder in APP.vue

Define, create a route:

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

Go to App.vue and add a route placeholder

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

Go to main.js to import routes

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

 The main page is blank, because this route is not defined, and secondly, there is nothing in app.vue.

The above is actually the routing and VUE file to do the matching. 

 

 

route-link is like a hyperlink,

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

 

 

 

 

 

Routing parameters

---

URL parameter transfer: generally used for page jumps, passing current data to new pages, such as details pages

params parameter path contains parameters

Configure routing: {path: '/user/:id', component: about}

Delivery method: Path after delivery: /user/6

Receive parameters: $route.params.id

query parameters? later

  Configure routing: {path: '/user/', component: about}

Delivery method: Path after delivery: /user?id=6

Receive parameter: $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>

The new page can get the value through $route.query.name.