- webpack配置
...
resolve: {
...
alias: {
...
// 簡化一些引入路徑
'@': resolve('src'), // ../src
'_V': resolve('src/views'), // ../src/views
'_C': resolve('src/components') // ../src/views/components
}
...
- config
...
dev: {
// 修改以下監(jiān)聽的端口，除此之外门怪，還可以根據(jù)需要增刪改配置其他項
port: 3000,
...
- src
src
components // 公共組件
router // 路由
assets // 靜態(tài)資源
views // 路由組件
App.vue // app根組件
main.js // 入口文件
- 去掉地址欄中的#
// router/index.js中設(shè)置mode為history
export default new Router({
mode: 'history',
routes: [
...
]
})
- 測試路由
// 創(chuàng)建src/views/Demo.vue
<template>
<div class="demo">
{{ msg }}
</div>
</template>
<script>
export default {
name: 'demo',
data() {
return {
msg: 'Hello Vue 2.0'
}
}
}
// router/index.js導(dǎo)入頁面組件
import Demo from '_V/Demo'
export default new Router({
mode: 'history',
routes: [
// 頁面路由
{ path: '/', component: Demo, name: 'demo' },
// 非法路由得运，重定向到/
{ path: '*', redirect: '/' }
]
})
效果：
修改后效果
當(dāng)在地址欄中輸入并不存在的路由時渺绒，都將重定向到
'/'褥蚯。
上一篇： vue2 — 使用vue-cli創(chuàng)建vue2項目
下一篇： vue2 — 組件
