vue-router的使用方法介绍

vue-router

对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。

学习网址：https://router.vuejs.org/installation.html#direct-download-cdn

提示：本篇博客仅仅介绍搭建项目之后，再下载vue-router的情况，并非搭建项目是直接引入vue-router。

一、安装方法（npm方式）

在终端运行以下指令

npm install vue-router

注意：--save 与 --save-dev 的区别

--save（可以省略） 下载的第三方依赖到package.js中的dependencies。

--save-dev 下载开发时依赖，指环境配置，下载到package.js中的devDependencies，webpack、bable等等均属于开发

时依赖。

二、导入与使用

vue-router下载之后，需要在入口文件main.js导入，具体做法如下：

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

// routes：数组，在该数组中配置所有的路由；
const routes = [
  {path:'/',component:myHome,name:'home'},
  {path:'/product/:productName/:price',component:myProduct,name:'product'}
];
// 创建router实例
const router = new VueRouter({
  routes
});
/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 引入到根实例中才可以使用导航功能
  router,
  components: {App},
  template: '<App/>',
  data(){
    return {

    }
  }
})

三、官网介绍使用步骤

网址：https://router.vuejs.org/zh/guide/#javascript

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！