- webpack配置
...
resolve: {
...
alias: {
...
// 简化一些引入路径
'@': resolve('src'), // ../src
'_V': resolve('src/views'), // ../src/views
'_C': resolve('src/components') // ../src/views/components
}
...
- config
...
dev: {
// 修改以下监听的端口，除此之外，还可以根据需要增删改配置其他项
port: 3000,
...
- src
src
components // 公共组件
router // 路由
assets // 静态资源
views // 路由组件
App.vue // app根组件
main.js // 入口文件
- 去掉地址栏中的#
// router/index.js中设置mode为history
export default new Router({
mode: 'history',
routes: [
...
]
})
- 测试路由
// 创建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导入页面组件
import Demo from '_V/Demo'
export default new Router({
mode: 'history',
routes: [
// 页面路由
{ path: '/', component: Demo, name: 'demo' },
// 非法路由，重定向到/
{ path: '*', redirect: '/' }
]
})
效果：
修改后效果
当在地址栏中输入并不存在的路由时，都将重定向到
'/'。
上一篇： vue2 — 使用vue-cli创建vue2项目
下一篇： vue2 — 组件
