SoFunction
Updated on 2025-04-05

How to use Vue-router routing

1. Explanation

Vue Router is the official router manager. It has deep integration with the core, making building single-page applications easy. The included functions are:

  • Nested routes/view charts
  • Modular, component-based routing configuration
  • Routing parameters, queries, wildcards
  • View transition effect based on Vue js transition system
  • Fine-grained navigation control
  • Links with automatic activation of CSS class
  • HTML5 history mode or hash mode, automatically downgraded in IE 9
  • Custom scrolling behavior

2. Installation

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 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 through ():

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

(VueRouter);

3. Test

1. Delete useless things first
2. Store components we wrote ourselves in the components directory
3. Define a component

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

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

Components

<template>
	<div>
		<h1>front page</h1>
	</div>
</template>

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

4. Install the route, and create a new folder in the src directory: router, which specifically stores the route, configure the route, as follows

import Vue from'vue'
//Import the routing pluginimport Router from 'vue-router'
//Import the components defined aboveimport Content from '../components/Content'
import Main from '../components/Main'
//Installing the routing(Router) ;
//Configure routingexport default new Router({
	routes:[
		{
			//Routing path			path:'/content',
			//Route name			name:'content',
			//Skip to component			component:Content
			},
  {
			//Routing path			path:'/main',
			//Route name			name:'main',
			//Skip to component			component:Main
		}
	]
});

5. Configure routing in

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

//Import the routing configuration directory created aboveimport router from './router'//Automatically scan the routing configuration inside
//To turn off the prompts given in production mode = false;

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

6. Use routing in

<template>
	<div >
		<!--
			router-link：By default it will be rendered into one<a>Label，toThe attribute is the specified link
			router-view：Components for rendering route matching
		-->
		<router-link to="/main">front 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 the detailed content on how to use Vue-router routing. For more information on the use of Vue-router routing, please follow my other related articles!