首页 > 其他 > 详细

vue - router 起步

时间:2018-09-10 16:06:12      阅读:199      评论:0      收藏:0      [点我收藏+]

官方API:https://router.vuejs.org/zh/guide/#javascript

 

vue-cli for index.js

 

 1 export default new Router({
 2   mode: ‘history‘, //路由模式,取值为history与hash
 3   base: ‘/‘, //打包路径,默认为/,可以修改
 4   routes: [
 5   {
 6       path: string, //路径
 7       ccomponent: Component; //页面组件
 8       name: string; // 命名路由-路由名称
 9       components: { [name: string]: Component }; // 命名视图组件
10       redirect: string | Location | Function; // 重定向
11       props: boolean | string | Function; // 路由组件传递参数
12       alias: string | Array<string>; // 路由别名
13       children: Array<RouteConfig>; // 嵌套子路由
14       beforeEnter?: (to: Route, from: Route, next: Function) => void; // 路由单独钩子
15       meta: any; // 自定义标签属性,比如:是否需要登录
16       icon: any; // 图标
17       // 2.6.0+
18       caseSensitive: boolean; // 匹配规则是否大小写敏感?(默认值:false)
19       pathToRegexpOptions: Object; // 编译正则的选项
20   }
21   ]
22 })

 

vue-cli for main.js

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 // 引入vue框架
 4 import Vue from ‘vue‘
 5 // 引入根组件
 6 import App from ‘./App‘
 7 // 引入路由配置
 8 import router from ‘./router‘
 9 
10 // 关闭生产模式下给出的提示
11 Vue.config.productionTip = false
12 
13 // 定义实例
14 new Vue({
15   el: ‘#app‘,
16   router, // 注入框架中
17   components: { App },
18   template: ‘<App/>‘
19 })

 

vue - router 起步

原文:https://www.cnblogs.com/cisum/p/9620214.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!