Use vue-router to complete simple navigation functions

This article mainly introduces the use of vue-router to complete simple navigation functions. It has certain reference value. Now I share it with you. Friends in need can refer to it.

vue-router is Vue. A set of dedicated routing tool libraries officially provided by js. This article mainly introduces the use of vue-router to complete simple navigation functions. Friends who need it can refer to it

vue-router is a dedicated routing tool library officially provided by Vue.js

The installation command is as follows

npm i vue-router -D

vue-router instance is a Vue plug-in, we need to connect it to Vue through Vue.use() in the Vue global reference In the instance.

In our project, main.js is the default program entry file, and all global configurations will be performed in this file.

We add the following reference to main.js

import VueRouter from 'vue-router'
Vue.use(VueRouter)

This completes the most basic installation work of vue-router.

The functions we want to implement next are described as follows

There are two links on the homepage: shopping cart and personal center

Click on different links to display Different contents

First we create two component files in the src directory: Cart.vue Me.vue

The contents of the two newly created component files have the same structure for the time being.

<template>
 <!-- 这个p里面的内容可设置不同以区分 -->
 <p>购物车</p>
</template>
<script>
export default {}
</script>
<style lang="scss"></style>

The next step is to define the matching rules between routing and these components in the main.js file.

The definition of VueRouter is very simple: create a VueRouter instance and specify the routing path to a component type

As shown in the following code (main.js)

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//引入创建的两个组件
import Cart from './Cart.vue'
import Me from './Me.vue'
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //将页面组件与path指令的路由关联
 {path:'/cart',component:Cart},
 {path:'/me',component:Me}
 ]
})
new Vue({
 el: '#app',
 //将路由实例添加到Vue实例中去
 router,
 render: h => h(App)
})

We can extract the above routing-related code and put it in another routes.js file to prevent the content of the main.js file from getting longer.

Create a new config folder and add the routes.js file into it.

The routes.js code is as follows

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入创建的两个组件
import Cart from '../Cart.vue'
import Me from '../Me.vue'
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //将页面组件与path指令的路由关联
 {path:'/cart',component:Cart},
 {path:'/me',component:Me}
 ]
})
export default router;

Then the main.js file code is reduced to the following:

import Vue from 'vue'
import App from './App.vue'
import router from './config/routes'
new Vue({
 el: '#app',
 //将路由实例添加到Vue实例中去
 router,
 render: h => h(App)
})

vue-router provides two instruction tags

: render the view component matched by the path
: Supports users to navigate in applications with routing functions

With the two command tags above, we can write the corresponding code in the program entrance App.vue:

<template>
 <p id="app">
 <p class="tabs">
  <ul>
  <li>
   <router-link to ="/cart">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link to ="/me">
   <p>个人中心</p>
   </router-link>
  </li>
  </ul>
 </p>
 <p class="content">
  <!-- 使用 router-view 渲染视图 -->
  <router-view></router-view>
 </p>
 </p>
</template>
<script>
export default {
 name: "app"
};
</script>
<style lang="scss"></style>

The above code has achieved the expected function.

Then we see that the path in to ="/cart" has actually been defined in {path:'/cart',component:Cart}. If you need to modify it, you have to It is necessary to modify these two places at the same time (if it is used in other places, change more)

Then directly change the path in {path:'/cart',component:Cart} Wouldn’t it be nice to take it out.

At this time, our vue-router provides an implicit route reference method, called - named route

Simply put, it replaces Url# by the name reference of the route.

const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //将页面组件与path指令的路由关联
 {name:'cart',path:'/cart',component:Cart},
 {name:'me',path:'/me',component:Me}
 ]
})

The to attribute is bound to the Vue instance using v-bind, and then the Url is obtained directly through the name.

  <li>
   <router-link :to ="{name:&#39;cart&#39;}">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link :to ="{name:&#39;me&#39;}">
   <p>个人中心</p>
   </router-link>
  </li>

  <li>
   <router-link :to ="{name:&#39;cart&#39;}" tag="span">
   <p>购物车</p>
   </router-link>
  </li>