VS Code
debugger for chrome 调试工具
debugger： （VSCode 和 浏览器产生联系，浏览器source）
vue.config.js babel.config.js ------ Vue配置项
launch.json ------ VSCode调试配置项 自动生成 webRoot工作目录 url ip+端口号
// vue.config.js
module.exports = {
// 配置 webpack 中 devtool
configureWebpack:{
devtool:'source-map'
}
}
// babel.config.js
module.exports = {
"env":{
"development":{
"sourceMaps": true, // 位置信息
"retainLines": true // 保留行号
}
},
presets: {
'@vue/app' // @vue/babel-preset-app
}
}
Vue Router 嵌套路由 命名路由
实例配置项： mode routers routers[0].path routers[0].component routers[0].children
vue-router 为组件注入了两个属性：
$router 对象，获得 new VueRouter() 的实例对象
$route 对象，当前路由匹配的信息
$route.params 动态路由有关的信息
<router-link> 一个链接，在应用内跳转
<router-link to="/about">About</router-link>
<router-link tag="li" to="/about"> <a>About</a> </router-link> 激活的类被应用在外部的 li 标签上，a 成为一个真实的链接
不支持target="_blank"属性
打开新标签页只能用 a
<router-view> 命名视图 嵌套命名视图
命名视图，默认为 default
<router-view name="a"></router-view>
路由和视图配合使用，共同完成一个页面
全局filter
Vue.filter("my-filter", function(value){}) // 注册
var myFilter = Vue.filter(“my-filter”) // getter返回已注册的过滤器
options/filters 本地filter
用法支持管道运算符 {{“abcdef” | capitalize }}
filters:{
capitalize: function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
导航守卫
“导航”表示路由正在发生改变
全局前置守卫 全局解析守卫 全局后置守卫
路由独享守卫 组件内守卫
路由元信息
$route.matched ---数组， 一个路由匹配的所有路由记录
过渡动效
<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果
<transition>
<router-view></router-view>
</transition>
单个路由的过渡 基于路由的动态过渡
滚动行为 ： 只在支持 history.pushState 的浏览器中可用