Vue ---day04

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 的浏览器中可用