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/ i d ‘ ) ‘ 2 、 ‘ t h i s . {id}`)` 2、`this. id)2this.router.push({name:‘mDetail’,params:{id}})`

1.4 编程式导航

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

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

this. r o u t e r . r e p l a c e ( ) 替 换 当 前 数 据 t h i s . router.replace() 替换当前数据 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即可。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值