How to use Vue-router routing

1. Description
2. Installation
3. Testing

1. Description

Vue Router is the official routing manager for Vue.js. It is deeply integrated with the core of Vue.js, making it easy to build single-page applications. Features included are:

Nested routes/view tables
Modular, component-based routing configuration
Route parameters, queries, wildcards
View transition effect based on Vue js transition system
Fine-grained navigation control
Links with auto-activated CSS classes
HTML5 history mode or hash mode, automatic downgrade in IE 9
Custom scrolling behavior

2. Installation

Test and learn based on the first vue-cli; First check whether vue-router exists in node modules
vue-router is a plug-in package, so we still need to use npm/cnpm to install it. Open the command line tool, enter your project directory, and enter the following command.

npm install vue-router --save-dev

If you use it in a modular project, you must explicitly install the routing function via Vue.use():

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

3. Testing

1. Delete useless things first
2. The components we wrote ourselves are stored in the components directory
3. Define a Content.vue component

<template>
	<div>
		<h1>Contents Page</h1>
	</div>
</template>

<script>
	export default {
		name:"Content"
	}
</script>

Main.vue component

<template>
	<div>
		<h1>Home</h1>
	</div>
</template>

<script>
	export default {
		name:"Main"
	}
</script>

4. Install the router. In the src directory, create a new folder: router to store the router and configure the router index.js as follows

import Vue from 'vue'
//Import routing plugin import Router from 'vue-router'
//Import the components defined above import Content from '../components/Content'
import Main from '../components/Main'
//Install routing Vue.use(Router);
//Configure routing export default new Router({
	routes:[
		{
			//Route path path:'/content',
			//Route name name:'content',
			// Jump to component component:Content
			},
  {
			//Route path path:'/main',
			//Route name name:'main',
			// Jump to component component:Main
		}
	]
});

5. Configure routing in main.js

import Vue from 'vue'
import App from './App'

//Import the routing configuration directory created above import router from './router' //Automatically scan the routing configuration inside //To turn off the prompt given in production mode Vue.config.productionTip = false;

new Vue({
	el:"#app",
	//Configure routing router,
	components:{App},
	template:'<App/>'
});

6. Use routing in App.vue

<template>
	<div id="app">
		<!--
			router-link: By default, it will be rendered as an <a> tag, and the to attribute is the specified link router-view: used to render the component matched by the route -->
		<router-link to="/main">Home</router-link>
		<router-link to="/content">content</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
	export default{
		name:'App'
	}
</script>

<style></style>

The above is the detailed content of how to use Vue-router routing. For more information about the use of Vue-router routing, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: