This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

preface

In vue program, and many times we need secondary routing or tertiary route to jump pages, but most of the demand, we are only secondary routing, a friend, use level 3 routing, suddenly overwhelmed, there is a new method, was with secondary routing configuration is the same, will open in detail below.

Results show

Here is the effect display:

Detailed steps

Create a project

Use the vue create ***** command to create a vue project with the directory structure shown below.

Modify import file

Modify the entry file app.vue

<template>
  <keep-alive>
	  <router-view/>
  </keep-alive>
</template>
Copy the code

New Folder

Create three new folders under views and name them Home, User and News. Create an index.vue file under the three folders respectively.

Write the code

Write the relevant code in three VUE files

Home/index.vue

<template>
	<div class="container">
		<div class="home"> <h2> Level 1 routing area -- home </h2> <router-link to="/home/user" tag="button"</router-link> </div> <keep-alive> <router-view /> </keep-alive> </div> </template> <script>export default {
		name: "Home"}; </script> <style scoped> .container{ height: 100vh; display: flex; margin:10px 100px; } .home button{ height: 50px; background-color:# 999999;
		outline: none;
		border: none;
		color: #fff;
		padding: 0 10px;
		border-radius: 20px;
		
	}
</style>

Copy the code

User/index.vue

<template>
	<div class = "container">
		<div class="user"> <h2> Secondary routing area -- User management </h2> <router-link to="/home/user/news" tag="button"</router-link> </div> <keep-alive> <router-view /> </keep-alive> </div> </template> <script>export default {
  name: "User"}; </script> <style scoped> .container{ height: 100vh; display: flex; margin:10px 100px; } .user button{ height: 50px; background-color:# 999999;
		outline: none;
		border: none;
		color: #fff;
		padding: 0 10px;
		border-radius: 20px;
		
	}
</style>

Copy the code

News/index.vue

<template>
  <div class="container">
  	<div class="news"> < h2 > 3 routing area - news center < / h2 > < / div > < keep alive - > < the router - view / > < / keep alive - > < / div > < / template > < script >export default {
  name: "News"}; </script> <style scoped> .container{ height: 100vh; display: flex; margin:10px 100px; } .news button{ height: 50px; background-color:# 999999;
		outline: none;
		border: none;
		color: #fff;
		padding: 0 10px;
		border-radius: 20px;
		
	}
</style>

Copy the code

Modifying the Router File

Under router, create a new file named home. Under home, create an index.js file.

The introduction of the file

Open the index.js file in the Router folder and bring in the home you just created in step 3.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '.. /views/Home.vue'
import homeRouter from './home'

Vue.use(VueRouter)

const routes = [
	homeRouter,
	{
		path: '/',
		name: 'Home',
		component: Home
	},
	{
		path: '/about',
		name: 'About',
		component: () => import('.. /views/About.vue')
	}
]

const router = new VueRouter({
	mode: 'history',
	base: process.env.BASE_URL,
	routes
})

export default router

Copy the code

Configure the file

Then, configure the home file under the router. The home/index.js code is as follows.

export default{
	path:'/home'// in vue @ means SRC directory component:() => import()'@/views/Home/index.vue'), // children:[{path:'user',
			name:'user',
			component: () => import('@/views/User/index.vue'), // continue nesting, children:[{path:'news',
					name:'newsone',
					component: () => import('@/views/News/index.vue')
				}
			]
		},
		{
			path:'news',
			name:'newstwo',
			component: () => import('@/views/News/index.vue')}}]Copy the code

test

Finally, enter /home, /home/user, /home/news, /home/user/news in the browser to test.

After the test is complete, you can see the specific effect at the beginning of the article.