新手小白VUE整理(9)——vue-router,编程式导航,滚动定位

VUE 2.X

1.什么是路由

路由(router)就是对应关系

2.什么是前端路由

前端路由就是指hash地址和组件的对应关系

3.前端路由的工作方式

• 用户点击了页面的路由链接
• 导致了URL地址栏中的Hash值发生了变化
• 前端路由监听到了Hash地址的变化
• 前端路由把当前Hash地址对应的组件渲染到浏览器中(监听onhashchange事件)

4.vue-router基本介绍

vue-router是vue.js官方给出的路由解决方案,它只能结合vue项目进行使用,能够轻松的管理SPA项目中的组件切换.
vue-router的官方地址:https://router.vuejs.org/zh/guide/

5.vue-router的安装和配置

• 安装vue-router的包
  npm i [email protected] -S (最好指定版本号,否则可能出现版本冲突的问题)
• 创建路由模块
• 导入并挂载路由模块
• 声明路由链接和占位符

1)在src源代码目录下,新建router/index.js路由模块,并初始化如下代码:
// 导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter()

// 向外共享路由的实例对象
export default router

2)挂载router
在main.js中导入router模块,并挂载到vue实例中,代码如下:
import Vue from 'vue'
import App from './App.vue'
import router from '@/router'

Vue.config.productionTip = false

new Vue({
  render: (h) => h(App),
  router // 属性值和属性名一样,简写
}).$mount('#app')

6.路由用法

1)认识router-view标签




2)认识router-link

首页

3)./router/index.js中路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
import Home from '@/components/Home.vue'
import Tab1 from '@/components/tabs/tab1.vue'
import Tab2 from '@/components/tabs/tab2.vue'

// 调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter({
  // routes是一个数组,用来定义hash地址和组件的对应关系,即路由规则
  routes: [
    // 配置路由重定向,用户访问"/",跳转到"/home"
    { path: '/', redirect: '/home' },
    // 组件中的a标签有"#",路由关系的配置中不能加"#"
    { path: '/home', component: Home },
    // 为路由规则开启props传参,对应组件中通过自定义属性获取动态参数的值
    { path: '/movie/:id', component: Movie, props: true },
    {
      path: '/about',
      component: About,
      // redirect: '/about/tab1',
      children: [
        // 通过children属性,声明子路由规则
        // 默认子路由,如果children数组中,如果某个子路由的path值为空,则这条路由规则,被称为默认子路由
        { path: '', component: Tab1 }, // 访问/about/tab1时,展示Tab1组件
        { path: 'tab2', component: Tab2 } // 访问/about/tab2时,展示Tab2组件
      ]
    }
  ]
})

4)App.vue中使用路由

7.路由重定向

路由重定向是指:用户在访问地址A的时候,强制用户跳转到地址C,从而展示特定的组件页面,通过路由规则的redirect属性,指定一个新的路由地址,示例代码:

// 创建路由的实例对象
const router = new VueRouter({
  // routes是一个数组,用来定义hash地址和组件的对应关系,即路由规则
  routes: [
    // 配置路由重定向,用户访问"/",跳转到"/home"
    { path: '/', redirect: '/home' },
    // 组件中的a标签有"#",路由关系的配置中不能加"#"
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ]
})

8.嵌套路由

1)基本概念

通过路由实现组件的嵌套韩式,叫做嵌套路由

2)子路由规则

通过children属性声明子路由规则
在src/router/index.js路由模块中,导入需要的组件,并使用children属性声明子路由规则:

// 导入组件
import Tab1 from '@/components/tabs/tab1.vue'
import Tab2 from '@/components/tabs/tab2.vue'
// 创建路由的实例对象
const router = new VueRouter({
  routes: [
    { path: '/about', 
      component: About,
      redirect :'/about/tab1',
      children:[ // 通过children属性,声明子路由规则
      // 默认子路由,如果children数组中,如果某个子路由的path值为空,则这条路由规则,被称为默认子路由
        {path:'tab1',component:Tab1}, // 访问/about/tab1时,展示Tab1组件
        {path:'tab2',component:Tab2} // 访问/about/tab2时,展示Tab2组件
      ]
    }
  ]
})

9.动态路由

1)基本概念

动态路由:把Hash地址中可变的部分定义为参数项,从而提高路由规则的复用性.,
在vue-router中使用英文的冒号(:)来定义路由的参数项,示例代码如下:

// 其中:id是参数项
{path:'movie/:id',component:Movie}
// 将一下3个路由规则,合并成了一个,提高了路由规则的复用性
{path:'movie/1',component:Movie}
{path:'movie/2',component:Movie}
{path:'movie/3',component:Movie}

2)示例代码

• router/index.js定义动态路由规则

const router = new VueRouter({
  // routes是一个数组,用来定义hash地址和组件的对应关系,即路由规则
  routes: [
    // 为路由规则开启props传参,对应组件中通过自定义属性获取动态参数的值
    { path: '/movie/:id', component: Movie, props: true },
  ]
})

• App.vue组件设置访问路由规则

雷神
复联
超人
- Movie.vue中接收路由入参

10.声明式导航&编程式导航

1)声明式导航基本概念

在浏览器中,点击链接时间导航的方式,叫做声明式导航,例如:
普通网页中点击链接,vue项目中点击都属于声明式导航

2)编程式导航基本概念

在浏览器中,调用API方法实现导航的方式,叫做编程式导航,例如:
普通网页中调用location.href跳转到新页面的方式,属于编程式导航

11.vue-router中编程式导航API

vue-router提供了许多编程式导航API,其中最常用的导航API分别是:

1)this.$router.push('hash地址')
  跳转到指定的hash地址,并增加一条历史记录
2)this.$router.replace('hash地址')
  跳转到指定的hash地址,并替换当前记录
  替换历史记录解释:
  1.历史记录:a->b,点击replace实现b->c
  2.则历史记录变成:a->c
3)this.$router.go(数值n)
  前进或后退

12.导航守卫

导航守卫可以控制路由的访问权限,比如:某些路由需要登陆或其他权限才能访问

1)全局前置守卫

每次发生路由的导航跳转时,都会触发全局前置守卫,因此,在全局前置守卫中,程序猿可以对每个路由进行访问权限的控制:

// 创建路由的实例对象
const router = newVueRouter({...})

// 调用路由实例对象的beforeEach方法,即可声明"全局前置守卫"
// 每次发生路由导航跳转的时候,都会自动触发fn这个"回调函数"
router.beforeEach(fn)

2)守卫方法的三个形参

全局前置守卫的回调函数中接收3个形参,格式为:

const router = newVueRouter({...})
router.beforeEach((to,from,next)=>{
  // to是将要访问的路由信息对象
  // from是将要刘凯的路由信息对象
  // next 是一个函数,调用next()表示放行,允许这次路由导航
})

3)next函数的3中调用方式

1.当用户拥有权限,直接放行,调用next()
2.当用户没有权限,强制其跳转到首页,next(‘/home’)
3.当用户没有权限,强制用户停留在当前页面,next(false)
示例代码:

// 创建路由的实例对象
const router = new VueRouter({
  // routes是一个数组,用来定义hash地址和组件的对应关系,即路由规则
  routes: [
    // 配置路由重定向,用户访问"/",跳转到"/home"
    { path: '/', redirect: '/home' },
    // 组件中的a标签有"#",路由关系的配置中不能加"#"
    { path: '/home', component: Home },
    // 为路由规则开启props传参,对应组件中通过自定义属性获取动态参数的值
    { path: '/movie/:id', component: Movie, props: true },
    {
      path: '/about',
      component: About,
      // redirect: '/about/tab1',
      children: [
        // 通过children属性,声明子路由规则
        // 默认子路由,如果children数组中,如果某个子路由的path值为空,则这条路由规则,被称为默认子路由
        { path: '', component: Tab1 }, // 访问/about/tab1时,展示Tab1组件
        { path: 'tab2', component: Tab2 } // 访问/about/tab2时,展示Tab2组件
      ]
    }
  ]
})
// 为router实例对象,声明全局前置导航守卫
// 只要发生了路由的跳转,就必然会触发守卫回调行数
router.beforeEach((to, from, next) => {
  console.log('=====to:', to)
  console.log('=====from:', from)
  // next函数的3中调用方式
  // 1.当用户拥有权限,直接放行,调用next()
  // 2.当用户没有权限,强制其跳转到首页,next('/home')
  // 3.当用户没有权限,强制用户停留在当前页面,next(false)
  next()
})

13.一些常用工具介绍

1. vue移动端最常用组件:vant
   官网:https://vant-contrib.gitee.io/vant/#/zh-CN/
2. pc端最常用组件:elementUI
   官网:https://element.eleme.cn/#/zh-CN/component/installation
3. 插件工具:lodash(鲁大师)
   官网:https://www.lodashjs.com/

14.滚动条定位功能大概实现

大概思路:

1. App.vue组件对要定位滚动条的组件添加缓存
2. Home.vue组件中对滚动事件进行监听,并通过路由的meta.top属性记录滚动条位置
3. 通过路由的scrollBehavior方法滚动条组件想要的位置

• App.vue文件中

• Home.vue文件

• ./router/index.js 文件

// 创建路由的实例对象
const router = new VueRouter({
  // routes是一个数组,用来定义hash地址和组件的对应关系,即路由规则
  routes: [
    // 配置路由重定向,用户访问"/",跳转到"/home"
    { path: '/', redirect: '/home' },
    // 组件中的a标签有"#",路由关系的配置中不能加"#"
    // Home组件中开启meta元信息属性,通过top属性记录滚动条位置值
    { path: '/home', component: Home,meta:{isRecord:true,top:0} ,
  ],
  // scrollBehavior滚动行为函数,与全局前置导航守卫对应的beforeEach函数一样,在每次切换路由的时候都会触发
  // scrollBehavior 函数接收 to和 from 路由对象。第三个参数 savedPosition，只有当这是一个 popstate 导航时才可用（由浏览器的后退/前进按钮触发）。
  // 关于scrollBehavior更多介绍,可见官网:https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html
  scrollBehavior(to, from, savePosition) {
    if (savePosition) {
      return savePosition
    } else {
      return { x: 0, y: to.meta.top || 0 }
    }
  }
})

15.demo完整文件

-main.js文件

import Vue from 'vue'
import App from './App.vue'
// @代表当前项目src目录,需配置
import '@/util/request.js'
// 在模块化导入的时候,如果给定的是文件夹,则默认导入这个文件夹下名叫index.js文件,
import router from '@/router'

Vue.config.productionTip = false

new Vue({
  render: (h) => h(App),
  router
}).$mount('#app')

• ./util/request.js 文件

// 导入vue
import Vue from 'vue'
// 导入axios
import axios from 'axios'

// 配置请求根路径
axios.defaults.baseURL = 'http://localhost:8080'
// 通过Vue的构造函数原型对象,全局配置axios
Vue.prototype.$http = axios

• ./router/index.js 路由配置文件:

import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
import Home from '@/components/Home.vue'
import Tab1 from '@/components/tabs/tab1.vue'
import Tab2 from '@/components/tabs/tab2.vue'

// 调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter({
  // routes是一个数组,用来定义hash地址和组件的对应关系,即路由规则
  routes: [
    // 配置路由重定向,用户访问"/",跳转到"/home"
    { path: '/', redirect: '/home' },
    // 组件中的a标签有"#",路由关系的配置中不能加"#"
    { path: '/home', component: Home },
    // 为路由规则开启props传参,对应组件中通过自定义属性获取动态参数的值
    { path: '/movie/:id', component: Movie, props: true },
    {
      path: '/about',
      component: About,
      // redirect: '/about/tab1',
      children: [
        // 通过children属性,声明子路由规则
        // 默认子路由,如果children数组中,如果某个子路由的path值为空,则这条路由规则,被称为默认子路由
        { path: '', component: Tab1 }, // 访问/about/tab1时,展示Tab1组件
        { path: 'tab2', component: Tab2 } // 访问/about/tab2时,展示Tab2组件
      ]
    }
  ],
   // scrollBehavior滚动行为函数,与全局前置导航守卫对应的beforeEach函数一样,在每次切换路由的时候都会触发
  // scrollBehavior 函数接收 to和 from 路由对象。第三个参数 savedPosition，只有当这是一个 popstate 导航时才可用（由浏览器的后退/前进按钮触发）。
  scrollBehavior(to, from, savePosition) {
    if (savePosition) {
      return savePosition
    } else {
      return { x: 0, y: to.meta.top || 0 }
    }
  }
})
// 为router实例对象,声明全局前置导航守卫
// 只要发生了路由的跳转,就必然会触发守卫回调行数
router.beforeEach((to, from, next) => {
  console.log('=====to:', to)
  console.log('=====from:', from)
  // next函数的3中调用方式
  // 1.当用户拥有权限,直接放行,调用next()
  // 2.当用户没有权限,强制其跳转到首页,next('/home')
  // 3.当用户没有权限,强制用户停留在当前页面,next(false)
  next()
})
// 向外共享路由的实例对象
export default router

• App.vue 文件:

• ./components/Home.vue

• ./components/About.vue

• ./components/Movie.vue

• ./components/tab/tab1.vue

• ./components/tab/tab2.vue