vue路由
- 路由
-
单页面应用 一切都在一个html页面执行 -
基本使用步骤 1. 安装 yarn add vue-router 2. 引入 import VueRouter from 'vue-router' 3. 使用插件 Vue.use(VueRouter) 4. 创建路由实例 const router = new VueRouter() 5. 关联到vue实例 new Vue({router: router}) -
配置路由规则 通过routes配置规则 new VueRouter({routes: [ {path: '', component: ''} ]}) 指定路由的出口 router-view 重定向 redirect 404页面 模式 hash history -
声明式导航 -
router-link to属性 用于指定跳转的地址 <router-link to=""> exact属性 精确匹配 -
高亮 router-llink-active 模糊匹配 router-link-exact-active 精确匹配 -
嵌套路由的配置 1. 给某个路由的children属性配置子路由 2. 在组件中给子路由指定路由的出口 -
编程式导航 router-link 声明式 this.$router.push(地址) 编程式 -
路由-全局前置守卫 router.beforeEach - vant组件 轻量、可靠的移动端 Vue 组件库 下载vant yarn add vant -D
-
全部引入 自动按需引入组件(推荐) 下载插件 babel-plugin-import yarn add babel-plugin-import -D 脚手架项目下babel.config.js中 plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true
