2--Vue-Router

2020-03-27 本文已影响0人 Daeeman

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

单页面应用.png

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

a. App.vue 模板结构

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

<template>
  <div id="app">
        <router-view />
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/home"">首页</router-link>
        <router-link to="/category">分类</router-link>
  </div>
</template>

切换路由<router-link>

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<!-- <a href="home">Home</a>-->

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

tag
<router-link> 渲染成某种标签，例如 <li>。于是我们使用 tag
<router-link to="/foo" tag="li">foo</router-link>
 <!-- 渲染结果 -->
 <li>foo</li>

//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

<template>
    <div>这是分类页面</div>   
</template>

<script></script>

<style></style>

3. 路由参数配置

a. 配置

src/router/main.js

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

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

b. 使用(Home.vue)

<router-link to="/produce/123">产品123</router-link><br>
<router-link to="/produce/abc">产品abc</router-link><br>
<router-link to="/produce/789?from=China">产品789</router-link><br>

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

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

<h1>产品</h1>
<h2>产品参数:{{$route.params.id}}</h2>
<h2 v-if="$route.query.from">查询参数:{{$route.query.from}}</h2>
<h3>path:{{$route.path}}</h3>

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切换

<router-link to=/home">首页</router-link>    
<router-link :to="{ path: 'home' }">首页</router-link> 
<router-link :to="{ name: 'produce', params: { id: 123 }}">产品123</router-link>
<router-link :to="{name:'Home'}">切换到首页按路由的名称</router-link>
<router-link :to="{path:'/produce/xyz?from=中国'}">切换到produce-path</router-link>

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

<template>
    <div>
        <h1>404</h1>
        <p>糟糕，页面被外星人劫走了</p>
        <button @click="$router.replace('/')">首页</button>
    </div>
</template>

11. 路由高亮

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

.router-link-exact-active
全局配置 <router-link> 默认的精确激活的 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'

<transition 
      enter-active-class="slideInRight animated"
      leave-active-class="slideOutRight animated"   >
    <router-view></router-view>
</transition>

17. 组件缓存

<keep-alive>
  <router-view  v-if="$route.meta.keep"  />
</keep-alive>
 <router-view v-if="!$route.meta.keep"

18. 路由懒加载

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

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

/* webpackChunkName: "about" */

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

19 子路由

导入

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

配置

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

使用

20. scoped（死够扑特）

<style scoped></style>

让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 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]

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

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

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

命名视图

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

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
{
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }