6-1.Vue-router安装和简单的应用

Vue-router

在vue应用中，使用a标签进行页面的链接是无法起作用的，这时需要采用vue-router插件(Vue开发中由于对路由的不支持，需采用vue-router插件)；
学习vue,必须知道路由的作用。路由就是SPA（单页应用）的路径管理器，vue-router是一个WebApp的链接路径管理系统，由于Vue开发的都是单页面应用，只有一个index.html主页面，所以需要采用该插件来管理。

vue-router安装

1.在搭建Vue的脚手架vue-cli时如果已经确认安装vue-router插件，则无需重复安装。如果选择“Y”则在初始化项目时就已经安装好了。

Install vue-router? Y

2.若在搭建脚手架时没有安装vue-router插件，则在命令行工具使用以下命令进行安装：

npm install vue-router --save-dev

index.js文件的重要解读

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

注意：
1.import语句将引入Vue应用 , vue-router插件以及其他组件
2.routers配置路由，其后接的是一个数组(链接数组)
3.数组里面存放的是每一个链接对象，包含了path ，name，component参数

添加新的模板页面

1.在src/components目录下新建vue文件，(demo.vue文件)
2.编写文件内容，文件主要包括三个部分：<template><script>和<style>
3.在template标签里面添加想要显示的内容，这里显示Hi,This is my first rounter

<script>
	export default{
		data(){
			return{
				content:'Hi,This is my first rounter'
			}
		}
	}
</script>

4.在index.js进行路由配置

• 引入demo组件：在router/index.js文件的上边引入Hi组件

import demo from '@/components/demo'

• 增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象

export default new Router({
  routes: [
	{
		path:'/demo',
		name:'Demo',
		compontent:Demo
	}
  ]
})

完成之后，在浏览器输入http://localhost:8080/#/demo

附加：
利用<router-link>可以制作导航，可以链接到其他页面。

 <router-link to="/">[显示字段]</router-link>

• to后面接的是导航的路径
• [显示字段] ：就是导航名称，比如首页。
  在App.vue页面添加导航链接，实现导航

<template>
  <div id="app">
    <img src="./assets/logo.png">
	<div>
		导航
		<p>
			<router-link to="/demo">跳转到demo页面</router-link>
		</p>
		<p>
			<router-link to="/">跳转到首页面</router-link>
		</p>
	</div>
    <router-view/>
	
  </div>
</template>

这样就实现了用<router-link>标签设置导航，点击就可以实现页面内容的变化。