vue-router 路由基本用法

在单页面下，实现不同组件的切换

 

1、什么是路由？

　　　　通过URL（hash值），映射不同的组件，实现单页面（SPA）组件切换

　　　　注意：在vue.js的技术栈中，路由是作为vue的插件出现 （vue本身是不自带vue-router，使用就要安装）

2、安装vue-router

　　　　npm  install  vue-router

3、路由的几个组成部分

　　　　【写在视图里】　

　　　　　　　　　　<router-link>: 链接，点击默认生成<a href="">， 实现组件切换

　　　　　　　　　　<router-view>: 组件容器，当地址切换了，映射的组件会加载到些容器

 　　　　【写在js代码里】

　　　　　　　　　　routes: 路由表，代表当前SPA应用中URL与组件映射关系

　　　　　　　　　　router: 路由对象，实现组件间切换及参数传递与获取

4、使用vue-router，开发SPA基本步骤

　　　　1、第一步：安装vue-router

　　　　　　　　　　npm  install  vue-router  -S

　　　　2、第二步：（1）在mian.js文件，引入vue-router插件

import VueRouter from 'vue-router';

 

　　　　　　　　　　（2）并使用vue-router插件

Vue.use(VueRouter);

 　　　　4、创建路由

const router = new VueRouter({
  routes　　//（缩写）相当于 routes：routes
})

 　　　　5、注入到，vue的根实例中

// 第5步：注入到vue根实例
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')