vue第九、十天基础知识 路由

一、路由

路由知识概况:

1.0 路由安装

官网地址：https://router.vuejs.org/zh/
含义：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
安装：①直接创建项目 会问你是否安装路由 你点YES就可以 ②单独下载 npm install vue-router

• 组件内容渲染的方式有两种

  组件渲染
  路由

1.1 基本路由

一级路由
路由文件中 index.js
//首先你要引入你要渲染的组件
import Index from '@/components/index'
import Detail from '@/components/detail'
//在路线中去定义一下
routes:[
  {
    path:'/index',
    component:Index
  },
  {
    path:'/detail',
    component:Detail
  },
  {
    path:'*',
    redirect:'/index'//重定向
  }
]
-------------------------
app.vue中
//渲染路由 路由出口
<router-view></router-view>
或者
<router-view />

1.2 嵌套路由

路由文件中 index.js
//首先你要引入你要渲染的组件
//一级路由
import Index from '@/components/index'
import Detail from '@/components/detail'
//二级路由
import Car from '@/components/car'
import Mine from '@/components/mine'
import Home from '@/components/home'
//在路线中去定义一下(二级路由如果不加/ 那么要带着一级路由地址)
  //routes 路线 这个数组中会有大量路线
  //当前二级路由如果地址前面加'/',那么就可以省略一级地址，在routerLink标签中，to属性='/二级路由地址'
  //当前二级路由如果地址前面没有加'/',那么在routerLink标签中，to属性='/一级地址/二级路由地址' 路由中的path也是一样 path：'/一级地址/二级路由地址'
routes:[
  {
    path:'/index',
    component:Index,
    children:[
      {
        path:'/home',
        component:Home
      },
      {
        path:'/mine',
        component:Mine
      },
      {
        path:'/car',
        component:Car
      },
      {
        path:'',
        redirect:'/home'
      }
    ]
  },
  {
    path:'/detail',
    component:Detail
  },
  {
    path:'*',
    redirect:'/index'//重定向
  }
]
---------------------
app.vue中
//渲染路由 路由出口
<router-view></router-view>
或者
<router-view />
 -------------------
 index.vue中
 //二级视图
 <router-link to='/跟path一样的地址'>首页</router-link>
  <router-link to='/跟path一样的地址'>购物车</router-link>
   <router-link to='/跟path一样的地址'>个人中心</router-link>
 //渲染路由 路由出口（二级的）
<router-view></router-view>
或者
<router-view />

1.3 动态路由

动态路由方式两种
①router-link
<router-link :to='"/mDetail/"+item.id+"/"+item.name' tag="div"></router-link>。记得设置路由文件,path:'/mDetail/:id/:name',
②编程式导航
1、this.$router.push(/mDetail/$id‘)‘2、‘this.$router.push({name:‘mDetail’,params:{id}})`

1.4 编程式导航

this.$router.push() 向历史记录中添加一条数据
传值的时候可以（replace和push是一个用法）
this.$router.push('路径')

> this.$router.push({
> path:'/路径',
> query:{key:value}
> })`

this.$router.replace()替换当前数据this.$router.go(-1) 回退上一个页面

1.5 路由守卫

全局守卫
写在main.js中：
router.beforeEach((to,from,next)=>{})
其中：next（）是中间件，用来执行下一步。
router.afterEach((to,from)=>{})
路由独享守卫

{
path:'/地址',
beforeEnter(to,from,next){
    if(from.path==='/movieList'||from.path==='/home'){
      next()
    }
 }
}

组件内部守卫
组件进入前的守卫：
这个拦截，不能进入当前组件。生命周期还没有开始，内部也没有this。
beforeRouteEnter(to,from,next){}

组件更新守卫：当局部数据变化（而非整个组件被加载）时，才会被触发。eg:动态路由变化时。内部可访问this实例。
beforeRouteUpdate(to,from,next){}

组件离开守卫：
含有当前组件的所有属性和方法，在离开当前路由时被触发。
beforeRouteLeave(to,from,next){}

1.6 滚动行为

1.7 懒加载

1.8 路由模式以及打包

1.9 路由的零散知识点

①router-link
router-link默认在DOM是a标签,如果不愿意，可以tag属性去更改其标签 <router-link tag='div' to=''></router-link>

②用is去显示router-link
<div is='router-link' to='path地址'></div>

③ alias 别名，可以用这个别名代替path地址
比如：{path:'/car',alias:'/a'} /a可以渲染path是/car的内容

④ vue-devTools调试工具（谷歌浏览器插件）
步骤打开更多工具=>扩展程序=>打开开发者模式=>把发送的扩展包直接拖入到浏览器中=>浏览器右上角出现灰色的vue=>重启浏览器。只有遇到vue项目的时候，图标才会亮这个工具可以查看，data属性，看路由$route的参数。（如果实现电脑用不了，也没关系，所欲内容都可以用控制台打印）

⑤router中的name
可以匹配动态路由

⑥activeClass='active’属性，独属于router-link，当选中当前组件时，会被激活该类名。（即动态地加上class）
⑦<router-link>默认会被解析为a标签，可以通过tag属性，把其解析为其他标签。eg:<router-link tag='div'></router-link>(将其解析为div标签)
⑧在引入组件时：import index from '@/compoents/index'
其中的@是src文件夹的别名。（@：resolve(‘src’)）

---

二、案例（美团）移动端案例

2.1 下载安装项目

 vue init webpack meituan(项目名称) 

2.2 初始化整个项目

1.删除没有用的项目文件夹和文件
2.删除 HelloWord.vue文件，清空router文件夹下，index.js与HelloWord相关的代码。
3.初始化app.vue文件只剩下tempalte,script,style

2.3 引入rem.js文件以及重置样式的文件

把js和css分别放置在assets文件夹中。
在mian.js中引入js和css
rem在使用的时候有多种方法,此处提供2种：
①直接调用remScale.js 换算比例关系是基于750px稿的宽度1rem=100px.
import './remScale.js'
②推荐淘宝布局flexible.js结合插件(px2rem)去使用，得设置一下。
import './assets/js/flexible'
插件的配置如下图：

注意以上方法择一而用

2.4 创建组件

经过分析得知要创建9个组件，5个一级路由，4个二级路由。

在main.js中引入相关路由后，并且测试通过后，再进行后续项目操作。在本项目中的重点知识有：

2.4.1 点击跳转到对应路由的办法

• router-link 实现跳转

  <router-link to="/moveList">
    <span>电影</span>
  </router-link>

• is实现动态组件切换
  <span is='router-link' to="/moveList">电影</span>
• 编程式导航
  html: <span @click="toFoodList">美食</span>

    js:  
    methods: {
    toFoodList() {
      this.$router.push("/foodList");
    }
  }

2.4.2 点击返回的办法

利用编程式导航：

<span @click="back">home</span>

back() {
  this.$router.go(-1); //-1表示返回上一级目录
},

2.4.3 显示对应商品详情的办法

moiveList文件:
	html中:
<ul class="moveList">
  <li v-for="item in moveList" @click="goDetail(item.id)" :key="item.id">
    <h3>{{ item.name }}:</h3>
    <img :src="item.img" alt="" />
  </li>
</ul>

   js的methods中: 
    goDetail(id) {
      this.$router.push({
        path: "/moveDetail",
        query: {
          id
        }
      });
    }

moiveDetail文件：
 data(){
	return{
	   moiveID :[]
	}
  },
 mounted() {
    this.moiveID = this.$route.query.id;
  }

2.5 登录页面

一般电商项目不会强制登录，因为要让用户去看商品。有的移动端或者原生的APP，我们需要先登录再进入
模拟登录界面

2.6 全局组件

创建一个common文件夹，在文件中创建几个公用的组件，创建一个index.js，封装好这个组件模块
应用的时候在main.js中，利用for in 循环去创建全局组件

import comComponent from './components/common'
for(let i in comComponent){
Vue.component(i,comComponent[i])
}

2.7 全局过滤器

创建一个filter文件夹，在文件中创建几个过滤器的模块，创建一个index.js，封装好这个过滤器模块
应用的时候在main.js中，利用for in 循环去创建全局过滤器

import comFilter from './filter'
for(let i in comFilter){
Vue.filter(i,comFilter[i])
}

2.8 字体图标

iconfont地址: https://www.iconfont.cn
搜索你需要的图标，加入购物车，下载代码。把文件复制到font文件夹，把iconfont.css放到css文件夹中
应用在main.js中 引入css文件 import './assets/css/iconfont.css'
在你需要应用的代码中，比如<button class="iconfont icon-tubiao-" @click='$router.go(-1)'>返回</button>

2.9 过渡动画

下载方式 npm install animate.css --save-dev
在main.js中引入import 'animate.css'
<transition enter-active-class="animated fadeIn"><router-view></router-view></transition>

2.10 权限

登录过的，可以查看所有页面。未登录的时候，有一些页面，你没有权限查看，必须强制跳转到登录页面，登录过后，方可查看。
通过路由守卫来实现。

三、问题总结

1、public 是保留关键字,不能作为你的变量名。否则会报错。应用的时候可以写成大写：Public。
2、每一级的路由重定向，要跳转到自己的path。
3、项目中应用.webp格式的图片报错：（图片无法正确被解析）

Module parse failed: Unexpected character '�' (1:4)...

解决办法：
找到bulid----vue-loader.conf.js配置文件下,在大约44行左右，在正则表达式里面加上想要解析的图片格式.webp即可。