1. You need to install routing first

Can be in ui Interface installation is also OK npm

2. establish router.js File and write it
Pay attention :
(1) The sub route does not need to be written again /
(2) If you need to transfer value path finish writing sth. path: ‘product/:id’, form
(3) I usually write one home Parent template Fill in the rest
// Pull dependence import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(
VueRouter); // Import required files import Home from './pages/home.vue'; import Login from
'./pages/login.vue'; import Logout from './pages/logout.vue'; import Index from
'./pages/index.vue'; import Product from './pages/product.vue'; import Order
from './pages/order.vue'; export default new VueRouter({ routes: [ { path: '/',
name: 'home', component: Home, redirect: '/index', children: [ { path: 'index',
name: 'index', component: Index, } , { path: 'login', name: 'login', component:
Login, }, { path: 'logout', name: 'logout', component: Logout, }, { path:
'product/:id', name: 'product', component: Product, } ] }, { path: '/order',
name: 'order', component: Order, } ] })
3. Each small file code
The order is as follows :

//home <template > <!-- <div> I'm the main page </div> --> <router-view> <div>123</div> </
router-view> </template> <script> export default { name: "home", }; </script> <
template> <div> I'm the main page <button @click="fn"> Jump to login page </button> </div> </template> <
script> export default { name: "index", methods: { fn() { // console.log(123);
this.$router.push("/login"); }, }, }; </script> <template > <div> I'm the login page <
button @click="fn"> Jump to product page </button> </div> </template> <script> export default {
name: "login", methods: { fn() { // console.log(123); this.$router.push(
"/product/14"); // Here, if it is a Links need to be added in addition to all the following URL }, }, }; </script> <template > <div>
I'm the logout page </div> </template> <script> export default { name: "logout", }; </script>
<template > <div> I'm the order page </div> </template> <script> export default { name:
"order", }; </script> <template > <div> I'm the product page </div> </template> <script> export
default { name: "product", }; // // In this way, we get the information of routing id // let id =
this.$route.params.id; </script>

Technology
©2019-2020 Toolsou All rights reserved,
Hikvision - Embedded software written test questions C Language application 0 The length of array in memory and structure is 0 In depth analysis data structure --- The preorder of binary tree , Middle order , Subsequent traversal How to do it ipad Transfer of medium and super large files to computer elementui Shuttle box el-transfer Display list content text too long 2019 The 10th Blue Bridge Cup C/C++ A Summary after the National Games ( Beijing Tourism summary )unity Shooting games , Implementation of first person camera python of numpy Module detailed explanation and application case Study notes 【STM32】 Digital steering gear Horizontal and vertical linkage pan tilt Vue Used in Element Open for the first time el-dialog Solution for not getting element