VueJS之vue-router、VUE的内置API

vue-router

安装

在脚手架第二步选中Router

作用

就像超链接一样切换页面,不刷新页面,vue是单页面应用(SPA)

SPA的优点

1.良好的交互体验 (白屏现象”,假死,“闪烁”现象)

2.减轻服务器压力

步骤[必须会]

1.建—创建我们需要的组件

FindMusic.vue //发现音乐
MyMusic.vue  //我的音乐
Friend.vue //关注

2.配—配置组件和路由对应关系(router/index.js)

const routes = [
   //重定向
  {
    path: "/",
    redirect: "/find"//重定向
  },
  //发现音乐
  {
    path: "/find",//路由 要唯一性
    component: FindMusic,//组件
    redirect: "/find/discover",//重定向
    //二级路由
    children: [
      //推荐
      {
        path: "/find/discover",
        component: Discover,
      },
      //排行榜
      {
        path: "/find/top-list",
        component: TopList,
      },
      //歌单
      {
        path: "/find/play-list",
        component: PlayList,
      },

    ]
  },
  //我的音乐
  {
    path: "/my",//路由 要唯一性
    component: MyMusic//组件
  },
  //关注
  {
    path: "/friend",//路由 要唯一性
    component: Friend//组件
  },
    
  //404
  {
    path: "*",
    component: Err404
  }

]

3.出—–路由出口(一级路由的路由出口在App.vue,多级路由,他的爸爸是谁就放在谁里面)

 //路由出口
 <router-view></router-view>

4.测—手动测试 是否正常

5.导航—不一定有

<router-link to="路由">xxxx</router-link>
//有一个激活类名 
//router-link-active

路由模式

hash	history	abstract
默认值 带#	不带#	nodejs环境

hash和history区别

[1] 地址栏显示的路径不同,一个有#, 一个没有#

[2] 底层实现的原理不同.

[3] 开发阶段没有什么区别,但是如果打包上线, history模式有bug, (不能刷新, 刷新就会报错404)

必须要让后端工程师解决. ( 发现刷新请求, 配置nginx代理, 重定向到首页).

路由传参

普通跳转

this.$router.push("路由")

query传参:参数在地址上,刷新数据还在. 数据比较复杂的时候,会解析不出来

//传递参数
this.$router.push({
	path:"路由",
	query:{
		//参数
	}
})
//接收参数
created(){
    this.$route.query;
}

params传参:参数不在地址栏,刷新数据不在了. 我们可以把数据存储本地或会话存储,还可以把数据存储vuex中

//传递参数
this.$router.push({
	name:"路由的名字",
	params:{
		//参数
	}
})
//接收参数
created(){
    this.$route.params;
}

动态路由参数:参数一个或者2个

 {
    path: "/contact/:id",//访问组件的时候 地址携带数据  /contact/12200
    component: Contact
  },
  
  created(){
      this.$route.params;
  }

路由2个对象

名字	描述
$router	VueRouter的实例对象
$route	路由信息对象

$router:
$router.push() 跳转
$router.go(0) 刷新
$router.go(-1) 返回上一级
$router.back() 返回上一级

$route
$route.query 获取query参数
$route.params 获取params参数
$route.path 获取当前路由

全局前置路由守卫

router/index.js 写在暴露之前和实例化之后
router.beforeEach((to,from,next)=>{
    to:到哪里去
    from:从哪里来
    next: next() 放行 next("路由") 滚回去
})
//经常性用于判断用户是否登录 如果登录了直接放行 没有登录滚到登录页面

VUE的内置API

ref[掌握]

作用:获取dom节点,相当与dom的选择器

<div ref="box1"></div>
this.$refs.box1

nextTick[掌握]

作用:在created做节点操作

created(){
	this.$nextTick(()=>{
        //节点操作
    })
}

Vue.filter[掌握]

作用:公共复用过滤器注册全局过滤器,每个组件都可以直接使用

//在main.js中 写全局过滤器
Vue.filter("过滤器名称",(形参)=>{
    //自己处理
    //返回处理之后的结果
})

Vue.use[掌握]

作用:使用vue的插件(基于vue写的插件)

Vue.use(插件名称);

Vue.use(ElementUI)//使用elementui
Vue.use(VueRouter)//使用vuerouter

$set[面试]

作用:重新挟持对象的属性

this.$set(属性,"属性名","属性值")

Vue.component

作用:全局注册组件,随便那个组件都可以使用

在main.js写
import xxx from "xxx.vue"
Vue.component("组件名称",xxx);

Vue.directive

作用:自己创建一个指令

写main.js中

Vue.directive('ellipsis', {
 // 被绑定元素插入父节点时调用(渲染的时候调用)*
 inserted: function (dom, o) {
  dom.style.width = o.value + 'px';
  dom.style.overflow = 'hidden';
  dom.style.whiteSpace = 'nowrap';
  dom.style.textOverflow = 'ellipsis';
 },
})

分析健身项目路由配置

找一级路由: 主要看ui的设计图,不看逻辑

一级组件:
广告组件/登录组件/注册组件/布局组件

二级组件(布局组件下面):
首页内容组件/运动组件/圈子组件/我的组件

三级组件
运动组件: 跑步组件/骑行组件/课程训练组件 

1建--创建组件
2配--配置路由
3出--出口(一级在App.vue 下级路由的出口在父亲那里)
4测--手动测
5导

$set[面试]

作用:重新挟持对象的属性

this.$set(属性,"属性名","属性值")

Vue.component

作用:全局注册组件,随便那个组件都可以使用

在main.js写
import xxx from "xxx.vue"
Vue.component("组件名称",xxx);

Vue.directive

作用:自己创建一个指令

写main.js中

Vue.directive('ellipsis', {
 // 被绑定元素插入父节点时调用(渲染的时候调用)*
 inserted: function (dom, o) {
  dom.style.width = o.value + 'px';
  dom.style.overflow = 'hidden';
  dom.style.whiteSpace = 'nowrap';
  dom.style.textOverflow = 'ellipsis';
 },
})

分析健身项目路由配置

找一级路由: 主要看ui的设计图,不看逻辑

一级组件:
广告组件/登录组件/注册组件/布局组件

二级组件(布局组件下面):
首页内容组件/运动组件/圈子组件/我的组件

三级组件
运动组件: 跑步组件/骑行组件/课程训练组件 

1建--创建组件
2配--配置路由
3出--出口(一级在App.vue 下级路由的出口在父亲那里)
4测--手动测
5导