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') // 现在,应用已经启动了!