vue - router 起步
阿新 • • 發佈:2018-09-10
rec import tps ebp 視圖 官方 script ive from
官方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 起步