vue-router的使用方法介绍

2018-6-19 seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

vue-router

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

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

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

一、安装方法（npm方式）

在终端运行以下指令

                [html] view plaincopy
                
                npm install vue-router

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

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

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

时依赖。

二、导入与使用

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

                [javascript] view plaincopy
                
                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

                [javascript] view plaincopy
                
                // 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')  
            
                // 现在，应用已经启动了！

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

« 如何成为有交互和视觉思维的UI 设计师？小米8的MIUI10对比MIUI9体验，外观UI变化大，是IOS的孪生兄弟？ »

vue-router的使用方法介绍

分类

日历

链接

个人资料

存档