vue 路由使用

1.安裝

2.使用

3.router幾個用法

npm安裝

npm install vue-router

1.繫結vue物件

2.非同步載入元件 component: () => import('../views/mysetting/person')

<

script
>
import vue from 
'vue
'import router from 
'vue-router
'import login from 
'../views/login
'vue.use(router)
export 
default
newrouter(]})
script
>

// the vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import vue from 'vue'
import router from './router'
import elementui from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
vue.config.productiontip = false
vue.use(elementui);
/* eslint-disable no-new */
new vue()

import vue from 'vue'

import router from 'vue-router'
import helloworld from '@/components/helloworld'
import login from '../views/login'
import index from '../views/index'
vue.use(router)
export default new router(,,,
]}
]})

1.跳轉頁面：router-view   router-link

登入頁面

2.重定向：redirect

3.巢狀路由：children

import vue from 'vue'

import router from 'vue-router'
import helloworld from '@/components/helloworld'
import login from '../views/login'
import index from '../views/index'
import person from '../views/mysetting/person'
import department from '../views/mysetting/department'
vue.use(router)
export default new router(,,,
]}
]})

4.命令路由：name 

export default new router(

]})

<
router-link 
:to="}"
>個人資訊
router-link
>

5.js導航

跳轉

跳轉跳轉
跳轉

gotorouter(path),

gotorouter2(path))  //物件  http://localhost:8080/#/person/123
},gotorouter3(name,id)})   //命令路由 http://localhost:8080/#/person/123
},gotorouter4(name,id)})   //帶引數查詢 對應：http://localhost:8080/#/person?id=123
}

Vue路由使用

路由是以外掛程式的形式引入到我們的vue專案中來的 vue router是vue的核心外掛程式 1 建立路由物件 var router new vuerouter 2 配置路由規則 router.addroutes 路由物件 路由物件 3 將配置好的路由物件交給vue 在options中傳遞 key...

Vue 路由使用

點選登入和註冊可以進行頁面切換 安裝vue,vue router 建立index.html login.js register.js檔案 將vue.js vue router.js login.js register.js按順序引入index.html中 編寫login.js和register.js...

vue路由的使用

1 配置路由檔案 在router.js中寫 import vue from vue import router from vue router import hello from components hello import word from components word vue.use ro...