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

975b587bf85a482ea10b0a28848e78a4: render the view component matched by the path
d0d6ee6dc6bdae089f3fc5baf31e4206: 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.

##So the configuration code of VueRouter was changed to the following:

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

In this way we are

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

So the code in the link part of App.vue is changed to the following

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

At this point, a simple navigation function has been completed using vue-router

Instructions

b988a8fd72e5e0e42afffd18f951b277 is rendered as 3499910bf9dac5ae3c52d5ede7383485 with the correct link by default. Tags, you can also generate other tags by configuring the tag attribute

For example

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

The above is the entire content of this article, I hope it will be helpful Everyone’s learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the form item verification method in the v-for loop when vue uses the Element component

Vue implements the idea of ​​fixing the number of input lines in textarea and adding underline style

The above is the detailed content of Use vue-router to complete simple navigation functions. For more information, please follow other related articles on the PHP Chinese website!