路由使用
配置路由:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
var router = new Router({
// 路由规则
routes: [
{
path: `/login`,
component: resolve => {
lazyLoading(resolve, 'system/Login')
},
},
...
// 找不到路由的默认地址
{
path: '*',
redirect: '/'
}
]
})
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
// 懒加载组件
const lazyLoading = (resolve, name, index = false) => {
require.ensure([], function(require) {
resolve(require(`@/views/${name}${index ? '/Index' : ''}.vue`));
})
}
HTML中必须要有:(通常在App.vue中,依据项目而定)
<router-view></router-view>
HTML:
<router-link to="/home">Home</router-link>
<!-- 或 -->
<router-link :to="'/home'">Home</router-link>
JS:
this.$router.push(url)
不记录历史纪录:
this.$router.replace(url)
前进、后退:
// 后退
this.$router.go(-1)
// 前进
this.$router.go(1)
获取参数:
this.$route.params.参数名
如, 路由中设置的路径是: /list/:id
,真实路径是 /list/3
,这么写 this.$route.params.id
获取查询参数:
this.$route.query.xxx //xxx:查询参数名
对于路径 /foo?user=1
,则 this.$route.query.user
的值是 1。
获取路径:
this.$route.path
@click 绑定事件不生效
按照Vue
文档,在组件
上绑定原生点击事件请使用@click.native
。
错误处理:
Custom elements in iteration require 'v-bind:key' directives
更改vetur配置 vscode->首选项->设置->搜索(vetur)"vetur.validation.template": true,
改成:false
配置打包后路径
如果打包后css
、js
等文件的引入路径出现错误则需要查看vue.config.js
中的publicPath
的路径,一般情况下如果像打包生成的文件可以部署在任何路径下则publicPath='./'
。
默认情况下,Vue CLI
会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/
。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/
,则设置 publicPath
为 /my-app/
。
这个值也可以被设置为空字符串 (''
) 或是相对路径 ('./'
),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。
...待续...
PS:本人文章只做个人笔记使用,不用点赞,不用收藏。内容可能来源网上搜索所得,也可能是自己使用心得记录。