How to Use Vue router Routing

Directory 1. Description
Step 2 Install
STEP 3 Test

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. The features included are:

Nested routing/view diagram Modular, component-based routing configuration Routing parameters, queries, wildcards View Transition Effect Based on Vue js Transition System Fine-grained navigation control Link with automatically activated CSS class HTML5 History Mode or hash Mode, automatically degraded in IE 9 Custom scrolling behavior

Step 2 Install

Test learning 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 install it with npm/cnpm. 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 functionality through Vue. use ():

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

Vue.use(VueRouter); 

STEP 3 Test

1. Delete useless things first
2. Store our own components in components directory
3. Define a component of Content. vue

<template>
	<div>
		<h1> Content page </h1>
	</div>
</template>

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

Main. vue Component

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

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

4. Install the route. Under the src directory, create a new folder: router to store the route. Configure the route index. js, as follows

import Vue from'vue'
// Import routing plug-ins 
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:[
		{
			// Routing path 
			path:'/content',
			// Route name 
			name:'content',
			// Jump to Component 
			component:Content
			},
  {
			// Routing 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 prompts given in production mode 
Vue.config.productionTip = false;

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

6. Using routing in App. vue

<template>
	<div id="app">
		<!--
			router-link Is rendered by default to 1 A <a> Label, to Property for the specified link 
			router-view Used to render the component to which the route matches 
		-->
		<router-link to="/main"> Home page </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 how to use the Vue-router routing details, more information about the use of Vue-router routing please pay attention to other related articles on this site!