Vue-路由(VueRouter)

vue-router

说明

1. 官方提供的用来实现SPA 的vue 插件
2. github: https://github.com/vuejs/vue-router
3. 中文文档: http://router.vuejs.org/zh-cn/

路由

路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

作用

用来在vue中实现组件之间的动态切换

下载

脚手架：下载: npm install vue-router --save
普通：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  //vue 路由js

相关API 说明

1. VueRouter(): 用于创建路由器的构建函数

new VueRouter({
// 多个配置项
})

2. 路由配置

routes: [
{ // 一般路由
	path: '/about',
	component: About
},
{ // 自动跳转路由
	path: '/',
	redirect: '/about'
  }
]

3. 注册路由器

import router from './router'
new Vue({
	router
})

4. 使用路由组件标签

1. <router-link>: 用来生成路由链接
		<router-link to="/xxx">Go to XXX</router-link>
2. <router-view>: 用来显示当前路由组件界面
		<router-view></router-view>

步骤

1. 创建组件对象

//声明组件模板
const login = {
   
  template:'<h1>登录</h1>'
};

const register = {
   
  template:'<h1>注册</h1>'
};

2. 定义路由对象的规则

//创建路由对象
const router = new VueRouter({
   
  routes:[
    {
   path:'/login',component:login},   //path: 路由的路径  component:路径对应的组件
    {
   path:'/register',component:register}
  ]
});

3. 将路由对象注册到vue实例