Vue router is easy to use

Let's first look at what a route is. It's a hyperlink

1, Renderings

  The hyperlink a tag above and the frame tag below

If Vue is replaced, the router link tag is above and the router view tag is below

2, Vue router forming code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<router-link to="/a">home page</router-link>
				<router-link to="/b">news</router-link>
				<router-link to="/c">commodity</router-link>
			</div>
			<div>
				<router-view></router-view>
			</div>
		</div>
	
		<script type="text/javascript">
			const a = {template:`<div>A home page</div>`};
			const b = {template:`<div>A pile of news</div>`};
			const c = {template:`<div>A pile of goods</div>`};
			
			const routes=[
				{path:'/a',component:a},
				{path:'/b',component:b},
				{path:'/c',component:c}
			];
			
			const myrouter = new VueRouter({
				routes
			});
			
			var vm = new Vue({
				el:"#app",
				router:myrouter
			})
		</script>
	</body>
</html>

3, Code components

  Step 4 can be written into step 5

            const router = new VueRouter({
				routes:[
					{path:"/a",component:a}
				]
			});

4, Dynamic matching

1. Matching parameters

If you have parameters, you can write: id in step 4

                const routes=[
					{path:'/d/:id',component:d},
				],

Then, when displaying the content in step 2, you can obtain the dynamic parameter id with {{$route.params.id}}

			const d = {template:`<div>Commodity id: {{$route.params.id}}</div>`};

2. Match all remaining pages

You can match all pages with / * and put it at the end of the matching route. You will match the above first and all the rest

			const	routes=[
					{path:'/a',component:a},
					{path:'/b',component:b},
					{path:'/c',component:c},
					{path:'/*',component:d},
			];

The above code will match a, b and c first in order, and the rest will match / *, and display component d

3. Match priority

In the order of definition, the priority of the above code is a > b > C >*

5, Component nesting

For component nesting, you only need to add a child in the routing relationship. Note here: aa is not in front of it/

			const	routes=[
					{
						path:'/a',
						component:a,
						children:[
							{path:'aa',component:aa},
							{path:'bb',component:bb},
						]
					},
					{path:'/b',component:b},
					{path:'/c',component:c},
			];

When requesting, use the < router link to = "/ A / BB" > sub page BB < / router link >

Complete code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<router-link to="/a">home page</router-link>
				<router-link to="/a/aa">Subpage aa</router-link>
				<router-link to="/a/bb">Subpage bb</router-link>
				<router-link to="/b">news</router-link>
				<router-link to="/c">commodity</router-link>

			</div>
			<div >
				<router-view></router-view>
			</div>
		</div>
	
		<script type="text/javascript">
			const a = {
				template:
					`
						<div>
							A home page
							<hr>
							<router-view></router-view>
						</div>
					`,
			};
			const b = {template:`<div>A pile of news</div>`};
			const c = {template:`<div>A pile of goods</div>`};
			const aa = {template:`<div>Subcomponents aaa oh</div>`};
			const bb = {template:`<div>Subcomponents bbb oh</div>`};

			
			const	routes=[
					{
						path:'/a',
						component:a,
						children:[
							{path:'aa',component:aa},
							{path:'bb',component:bb},
						]
					},
					{path:'/b',component:b},
					{path:'/c',component:c},
			];

			const myrouter = new VueRouter({
				routes
			});
			
			var vm = new Vue({
				el:"#app",
				router:myrouter
			})
		</script>
	</body>
</html>

design sketch

  6, Programming navigation

< router link to = "/ a" > Home Page < / router link >   ===>  $ router.push("a")

This $route is the object myroute defined in step 4

It can be written like this when in use

                methods:{
					toindex(){
						myrouter.push("/a")
					}
				}

In addition to push, there are replace and go

The function of replace is the same as that of push, but there is no history record. The parameter of go is an integer, indicating a few steps forward or backward

First write a piece of code with push and go

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<!-- <router-link to="/a">home page</router-link> -->
				<button @click="toindex">Home page 1</button>
				<!-- <router-link to="/b">news</router-link> -->
				<button @click="tob">Message 2</button>
				<!-- <router-link to="/c">commodity</router-link> -->
				<button @click="toc">Commodity 3</button>
				<!-- One step ahead -->
				<button @click="goforward">forward</button>
				<!-- Step back -->
				<button @click="goback">back off</button>

			</div>
			<div >
				<router-view></router-view>
			</div>
		</div>
	
		<script type="text/javascript">
			const a = {template:`<div>A home page 1</div>`};
			const b = {template:`<div>A pile of messages 2</div>`};
			const c = {template:`<div>A pile of goods 3</div>`};
			
			const	routes=[
					{path:'/a',component:a},
					{path:'/b',component:b},
					{path:'/c',component:c},
			];

			const myrouter = new VueRouter({
				routes
			});
			
			var vm = new Vue({
				el:"#app",
				router:myrouter,
				methods:{
					toindex(){
						myrouter.push("/a")
					},
					tob(){
						myrouter.push("/b")
					},
					toc(){
						myrouter.push("/c")
					},
					goforward(){
						myrouter.go(1)
					},
					goback(){
						myrouter.go(-1)
					}
					
				}
			})
		</script>
	</body>
</html>

Depending on the operation effect, the direction key of the browser in the upper left corner can be used because there are historical browsing records. The function of go is to front and back. However, in addition to 1 and - 1, any integer can be written. Of course, if there are not so many browsing records, nothing will be displayed

  Another code of replace and go

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<!-- <router-link to="/a">home page</router-link> -->
				<button @click="toindex">Home page 1</button>
				<!-- <router-link to="/b">news</router-link> -->
				<button @click="tob">Message 2</button>
				<!-- <router-link to="/c">commodity</router-link> -->
				<button @click="toc">Commodity 3</button>
				<!-- One step ahead -->
				<button @click="goforward">forward</button>
				<!-- Step back -->
				<button @click="goback">back off</button>

			</div>
			<div >
				<router-view></router-view>
			</div>
		</div>
	
		<script type="text/javascript">
			const a = {template:`<div>A home page 1</div>`};
			const b = {template:`<div>A pile of messages 2</div>`};
			const c = {template:`<div>A pile of goods 3</div>`};
			
			const	routes=[
					{path:'/a',component:a},
					{path:'/b',component:b},
					{path:'/c',component:c},
			];

			const myrouter = new VueRouter({
				routes
			});
			
			var vm = new Vue({
				el:"#app",
				router:myrouter,
				methods:{
					toindex(){
						myrouter.replace("/a")
					},
					tob(){
						myrouter.replace("/b")
					},
					toc(){
						myrouter.replace("/c")
					},
					goforward(){
						myrouter.go(1)
					},
					goback(){
						myrouter.go(-1)
					}
					
				}
			})
		</script>
	</body>
</html>

When running, the direction keys in the upper left corner of the browser cannot be used, nor can go, because replace has no browsing record

7, Named route

This is to add a name attribute to the routing correspondence

{path:'/a',name:'jack', component:a}

Use object when using

<router-link :to="{name:'jack'}">home page</router-link>

8, Named view

Just like naming routes, add a name attribute to the view, so that a route can correspond to multiple views

View plus name:

			<div >
				<router-view></router-view>
				<router-view name="viewa"></router-view>
				<router-view name="viewb"></router-view>
			</div>

Routing plus correspondence. The component here has an s because there are multiple views

			const	routes=[
					{path:'/a',component:a},
					{
						path:'/b',
						components:{
							default:a,
							viewa:b,
							viewb:c,
						}
					},
			];

Operation effect

  9, Redirection and alias

1. Redirect

Write / B directly in the routing correspondence, so that accessing / a will directly redirect to the content of / b

{path:'/a',redirect:'/b'}

  2. Alias

This alias is almost as useful as redirection

{path:'/a',redirect:'/b'}

/When a redirects to / b, access a and open b

{path:'/a',component:aa,alias:'/b'}

/When the alias of a is / b, access a, open a, access b, and open a

When a has an alias, it does not affect itself, but affects the "alias"

10, Routing component parameters

1. Pass parameters with $route

In the routing correspondence, use / a/:id to pass parameters

In the display component, use {{$route.params.id}} to get parameters

  2. Pass parameters with props

Can be decoupled from $route

Add props attribute in the routing relationship, and use props to represent the attribute in the display template

 

That's all for the basic use of Vue routing

For advanced contents, please refer to: Vue routing official document

Tags: Javascript Front-end Vue.js

Posted on Sat, 30 Oct 2021 07:36:00 -0400 by new_programmer