Vue serie once: enrutamiento vue-router

11.1 Descripción

---

Al aprender, intente abrir los documentos oficiales tanto como sea posible.

Vue Router es el administrador de enrutamiento oficial para Vue.js. Está profundamente integrado con el núcleo de Vue.js, lo que facilita la creación de aplicaciones de una sola página. Las características incluidas son:

• Ruta anidada/tabla de vista
• Configuración de enrutamiento modular basada en componentes
• Parámetros de enrutamiento, consultas, comodines
• Ver el efecto de transición basado en el sistema de transición Vue js
• Control de navegación detallado
• Enlaces con clases CSS activadas automáticamente
• Modo historial HTML5 o modo hash, degradado automáticamente en IE 9
• Comportamiento de desplazamiento personalizado

11.2 Instalación

Pruebe y aprenda según el primero vue-cli; primero verifique si hay vue-router en los módulos de nodo
  vue-router es un paquete de complemento, por lo que aún necesitamos usar n pm/cn pm para instalar. Abra la herramienta de línea de comandos, vaya al directorio de su proyecto e ingrese el siguiente comando.

npm install vue-router --save-dev

Si lo usa en un proyecto modular, debe instalar explícitamente la funcionalidad de enrutamiento a través de Vue.use() :

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

Vue.use(VueRouter);

11.3 Pruebas

1. Eliminar primero las cosas inútiles
2. componentsAlmacenar componentes escritos por nosotros mismos en el directorio
3. Definir un Content.vuecomponente de

<template>
	<div>
		<h1>内容页</h1>
	</div>
</template>

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

Main.vuecomponentes

	<template>
	<div>
		<h1>首页</h1>
	</div>
</template>

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

4. Instale el enrutamiento, cree una nueva carpeta en el directorio src:, routerespecialmente almacene el enrutamiento, configure el enrutamiento index.js, de la siguiente manera

import Vue from'vue'
//导入路由插件
import Router from 'vue-router'
//导入上面定义的组件
import Content from '../components/Content'
import Main from '../components/Main'
//安装路由
Vue.use(Router) ;
//配置路由
export default new Router({
	routes:[
		{
			//路由路径
			path:'/content',
			//路由名称
			name:'content',
			//跳转到组件
			component:Content
			},{
			//路由路径
			path:'/main',
			//路由名称
			name:'main',
			//跳转到组件
			component:Main
			}
		]
	});

5. main.jsConfigurar el enrutamiento en

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

//导入上面创建的路由配置目录
import router from './router'//自动扫描里面的路由配置

//来关闭生产模式下给出的提示
Vue.config.productionTip = false;

new Vue({
	el:"#app",
	//配置路由
	router,
	components:{App},
	template:'<App/>'
});

6. App.vueUtilice el enrutamiento en

<template>
	<div id="app">
		<!--
			router-link：默认会被渲染成一个<a>标签，to属性为指定链接
			router-view：用于渲染路由匹配到的组件
		-->
		<router-link to="/">首页</router-link>
		<router-link to="/content">内容</router-link>
		<router-view></router-view>
	</div>
</template>

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