Vue入门（八）之路由

一、路由

1.1、路由是什么

vue的路由使用在SPA应用中的组件跳转，相当于多页面的 a标签。
详情参考官网vue路由

1.2、使用路由

1.2.1、引入js文件的方式

1. 引入vue-router.js文件

<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2. 定义若干个组件

let goodlist = {
   template:"<div>商品列表</div>"
}

let goodsdetail = {
   template:"<div>商品详情</div>"
}

3、定义路由对象

• 路由配置（json数组）

let routes = [
	{path:'/goodslist',component:goodlist},
	{path:'/goodsdetail',component:goodsdetail}
];

• 实例化一个vueRouter对象

let router = new VueRouter({
	   routes:routes
});

4. 挂载vueRouter对象

   把vueRouter对象，挂载（注册）到vue对象里

let vm = new Vue({
    el:"#app",
    router
});

5. 跳转代码（声明式）

 <router-link to='/goodslist'>商品列表</router-link>

1.2.2、模块化的方式

脚手架安装时，会默认安装vue-router。

1. 安装

npm i vue-router -S 

2. 定义组件（单文件组件）

3. 创建vueRouter对象，并做路由配置和引入

3.1）创建vueRouter对象（定义路由对象，配置路由）

在src目录下新建文件夹router,再新建index.js（文件名任意）

import Vue from 'vue'

//1. 引入路由包
import Router from 'vue-router'

//2. 安装插件包到Vue上, 
Vue.use(Router)

//3. 路由配置

let routes = [
  {
      path: '/', 
      component: HelloWorld
  },
  {
      path: '/home',
   	  component: Home
  }, //route  一条路由的配置
]

//4.路由实例
let router = new Router({ //插件路由对象
  // routes:routes
  routes,
});

//5.导出路由实例，让它去控制vue根
export default router

3.2)在main.js中引入vueRouter对象，并植入到根属性

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

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

4. 展示

<router-view>展示区</router-view>

5. 跳转
   5.1)声明式跳转

<router-link to="/home">声明式跳转</router-link>
<router-link to="/home" tag='li' active-class='类名' >声明式跳转</router-link>

属性说明：

to:跳转的路径
tag='li' 指定编译后的标签，默认是 a 标签。
active-class='类名' 	指定激活后的样式	模糊匹配
exact-active-class='类名' 	指定激活后的样式  严格匹配
router-link和router-view组件是vue-router插件提供的

5.2）编程式跳转

this.$router.push(字符串/对象)：//添加一个路由 （记录到历史记录)

this.$router.replace({name:'...'})  //替换一个路由 （不记录到历史记录)

this.$router.go(-1|1)|back()|forward()  //回退/前进

二、第三方组件

elementUI官网
vant官网
mintUI官网