2--Vue-Router

1. 单页应用模式SPA和多页应用模式MPA

单页面应用.png

2. 简单介绍（目录文件的基本使用）

a. App.vue 模板结构

存放页面
路由匹配到的组件将会渲染到App.vue里的
那么这个App.vue里应该这样写：

切换路由

Home




Home

Home

Home

User

Register

tag
 渲染成某种标签，例如 
。于是我们使用 tag
foo
 
 
foo

//active-class
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

b. router / index.js

• 导入路由

import Sort from '../views/Sort.vue'
import User from '../views/User.vue'
import Produce from '../views/Produce.vue'

• Vue路由配置（定义路由）

{
    path: '/home',  
       //  路由连接地址 和router-link to值对应
    name: 'Home', 
      //  路由的名称 
    component: Home 
      //  路由页面使用的组件被填充的router-view里面的组件              
  },

c. views/xxx.vue

3. 路由参数配置

a. 配置

src/router/main.js

import Produce from '../views/Produce.vue'

{path:“/produce/:id”
 name:"produce"
 component:Produce
}
:id就是给路由配置的参数
(同一组件，不同参数，不同的页面数据，实现组件的复用)

b. 使用(Home.vue)

产品123

产品abc

产品789

c. 获取路由参数(Produce.vue)

this.$route.params.id ----------// 获取名称为id的参数（$route不带r）

产品
产品参数:{{$route.params.id}}
查询参数:{{$route.query.from}}
path:{{$route.path}}

4. 路由查询参数query与路径path获取

// produce/abc?from=China（$route不带r; China就是获取的值）
{{this.$route.query.from}}
//query，存在from才显示from
//?后面就是查询参数
{{this.$route.path}}   //获取当前路径地址

5. rem响应式布局

rem 布局
1. 拷贝flex.min.js 文件到项目目录
2. src/main.js 导入 import “xxx.flexible.min.js”
3. 在flexible.min.js修改设计宽度
4. 修改css单位 100px = 1rem;

6. 路由js切换

• this.$router.go(-1) ==>后退一步记录，等同于 history.back()
  this.$router.go(1) ==>在浏览器记录中前进一步，等同于 history.forward()
  router.go(3) ==>前进 3 步记录

• this.$router.push("url") 跳转到url页面

• this.$router.replace("url")
  跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录,不留历史记录。

7. 路由html切换

首页    
首页 
产品123
切换到首页按路由的名称
切换到produce-path 

8. redirect 路由重定向

{ path: '/a', redirect: '/b' }    //当进入a直接跳转到b页面

9. 路由别名

{ 
path: '/a',
name:'home', 
component: Home,
alias: '/home',  
// alias:['/home','/main','/index']  多个时
}
//home与main,index地址都能进入同一页面

10. 路由404

{
    path: '*',// 会匹配所有路径
    name: 'NoMatch',
    component: NoMatch
},
  // 记得要导入NoMatch.vue

11. 路由高亮

.router-link-active
全局配置 默认的激活的 class

.router-link-exact-active
全局配置 默认的精确激活的 class

12. 使用Cookie本地化数据

导入Cookie
import Cookie from '../assets/js/Cookie'

使用Cookie
Cookie.setCookie("uname","mumu");
Cookie.delCookie("uname");
this.uname = Cookie.getCookie("uname");

13. 路由守卫（路由权限控制）全局

• beforeEach（） 进入前调用
• afterEach（） 离开后调用

守卫 三个参数

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: 一定要调用该方法来路由才会切换。
    next() 直接进入下个路由
    next(false) 路由回到from页面
    next('/') 路由跳转到首页

src/router/main.js添加

import Cookie from "../assets/js/Cookie.js"

router.beforeEach((to,from,next)=>{
    console.log("from:",from);
    console.log("to:",to);
    if(to.path=='/cart'){
        if(!Cookie.getCookie('uname')){
            next("/login?redirect=/cart");
        }else{
            next();
        }
    }else{
        next();
    }    
})

14. 组件内部守卫

• beforeRouteEnter 进入前 （没有this）
• beforeRouteUpdate 参数更新时
• beforeRouteLeave 路由离开前

Cart购物车页面

    export default{
        //路由（页面）离开前做一些判断
        beforeRouteLeave(to,from,next) {
            let flag=window.confirm('现在商品大减价，确定离开吗？');
            if(flag){
                next();
            }else{
                next(false)
            }
        }
    }

15. 路由元信息

给路由配置额外的信息
{
path:"/cart",
meta:{requireAuth:true}
}
$route.meta.requireAuth 获取

import Cookie from "../assets/js/Cookie.js"
router.beforeEach((to,from,next)=>{
  if(to.meta.requireAuth){
    if(!Cookie.getCookie("uname")){
      next("/login?redirect="+to.path);
    }else{
      next();
    }
  }else{
    next();
  } 
})

16. 路由过渡(动画)

main.js里边引入css或者自己写

import   './assets/css/animate.min.css'

17. 组件缓存

18. 路由懒加载

通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

/* webpackChunkName: "about" */

魔法注释 ：指的是吧路由分割为一个单独的js文件名称是about

19 子路由

1. 导入

import Detail from '../views/Detail'
import Arg from '../views/Arg'
import Comment from '../views/Comment'

2. 配置

{
path:"/detail",
name:"detail",
component:Detail,
children:[
  {path:' ',redirect:'arg'}
  {path:'arg',component:Arg},
  {path:'comment',component:Comment},
]
}

3. 使用

20. scoped（死够扑特）

让css只在当前组件中起作用

21. 嵌套路由

[
    { path: '/index', component: index,
        children: [
            { path: 'info', component: info}
        ]
     }
]
通过/index/info就可以访问到info组件了
 [
    { path: '/index', component: index,
        children: [
            { path: 'info', component: info}
        ]
     }
]

通过/index/info就可以访问到info组件了

routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的  中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的  中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由

[
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的  中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]

命名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

{
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }