0


Vue2前端路由(vue-router的使用)、动态路由与导航守卫、路由和视图的命名以及声明式和编程式导航、

一、vue2的前端路由(vue-router)

1、路由:页面地址与组件之间的对应关系

2、路由方式:服务器端路由、前端路由

3、前端路由:在前端维护一组路由规则(地址和组件之间的对应关系),模式有两种:

(1)hash模式:类似于锚点。在地址前带有#

(2)History模式:由Html5使用,地址前不带#,地址之间用’/‘分隔。需要服务器端的辅助

4、SPA:Vue适合开发单页面应用(Single Page Application)

一个Web网站只有一个html页面,所有组件的切换都在一个页面中完成。组件之间的切换是通过前端路由来实现的

5、前端路由的工作方式:

(1)用户点击页面中的路由链接

​ (2)URL的hash地址就会发生改变

​ (3)前端路由监听到了URL的改变

(4)前端路由会查找路由表,将hash地址对应的组件渲染到浏览器中

6、vue-router路由模块:是由vue.js官方给出的前端路由模块,只能和vue项目结合,方便SPA项目实现组件之间的切换

(1)vue-router的版本:

​ A、vue2中使用vue-router3:npm install vue-router@3

​ B、vue3中使用vue-router4: npm install vue-router@4

(2)vue-router的组成部分:

​ A、VueRouter:路由器类(路由器组件),用来维护路由表(URL地址与组件的映射)

B、router-link:路由链接组件,本质就是标签,路由请求的用户接口

​ C、router-view:路由视图组件(路由出口),主要负责渲染组件

7、示例:

(1)创建自定义组件

​ (2)在src下创建router/index.js:创建路由器实例

(3)在src/main.js入口文件中挂载路由器

(3)在src/main.js入口文件中挂载路由器

import Vue from 'vue'
import App from './App.vue'
import router from './router';

new Vue({
  router,//注册路由器
  render: h => h(App),
}).$mount('#app')

(4)在App.vue中声明路由链接:和渲染组件的

​(5)在src/router/index.js中维护一个路由表

//导入模块
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);//注册路由器
//创建路由器实例
const router = new VueRouter({
    //设置路由表
    routes:[
        {
            path:'/books',
            component:()=>import('../components/Books')
        },
        {
            path:'/cards',
            component:()=>import('../components/Cards')
        }
    ],
    mode:'history'//修改路由模式为'history'模式
});
export default router;

8、vue-router中常用的方法

(1)路由重定向:使用redirect 属性,用户在访问地址A时,强制用户跳转到地址C

const router = new VueRouter({
  routes:[
      {path:'/',redirect:'/Home'}
  ]
})

(2)嵌套路由:在组件中嵌套显示组件(通过路由实现组件的嵌套显示)

    嵌套路由也称为多级路由,具体配置如下
     
const routes = [
  {
    path: '/admin',
    component: Home,
    children:[
      {
        path:'studentList', //二级路由前面不要带 /
        component:StudentList
      },
      {
        path:'studentAdd',  //二级路由前面不要带 /
        component:StudentAdd
      }
    ]
  },
]

二、导航守卫

1、用途:在页面导航过程中实现重定向、取消路由、权限验证等业务

2、分类:全局守卫、组件内部守卫、路由独享的守卫

3、全局守卫:

​ (1)全局的前置守卫:使用 **router.beforeEach(to,from,next){ } **在src/router/index.js

**路由表文件中 **来注册

to:将要访问的路由的信息对象

​ from:将要离开的路由的信息对象

​ next:是一个函数,调用next()表示当前路由已经放行

​ (2)next调用的情况:

​ A、用户拥有了权限,直接放行:next()

​ B、用户没有权限,强制跳转到指定的页面:next(‘/login’)

​ C、用户没有权限,不允许访问:next(false)

代码示例:

// 注册全局前置导航守卫
router.beforeEach((to, from, next) => {
  // to and from are both route objects. must call `next`.
  if (to.path === '/login') {//若跳转的路径为登陆页面
    next();
  } else {//请求的是其他路径:判断是否已经登陆过
    if (sessionStorage.getItem('isAuth') === 'true') {
      next();
    } else {//用户未登录
      next({//强制跳转到登录页面
        path: '/login',
        query: {//查询,重定向至login的完整路径
          redirect: to.fullPath
        }
      })
    }
  }
})

三、动态路由

1、什么是动态路由: 将URL地址中可变的内容设置成参数,根据不同的参数渲染不同的组件。(组件可以复用)

2、在组件中得到动态的路由参数:this.$route.params.参数名

3、$route和$router的区别:

(1)$router:

    ​ A、是VueRouter的实例,是一个全局的路由对象。用户可以在任何地方使用

     B、包含了所有的路由对象(实际代表的路由文件—- 路由表、路由模式)

     C、可以通过$router进行路由跳转(push、replace)

** (2)$route:**

    ​ A、代表当前正在跳转的路由对象,是一个局部对象

    ​ B、每个路由都有一个$route

​ C、用法:this.$route后面跟name、path、params、query

四、命名路由

1、什么是命名路由?

​ 在路由表中给路由项设置name属性

​ 2、在 < router-link >中使用name进行映射

4、路由懒加载

通过懒加载不会一次性加载所有组件,而是访问到组件的时候才加载。这样的处理对组件比较多的应用会提高首次加载速度。

3、缓存路由组件

作用:让不展示的路由组件保持挂载,不被销毁

<keep-alive include="StudentAdd">
    <router-view></router-view>
</keep-alive>

include是指定哪些组件会被缓存,其中include中的值是和组件中name名称对应的,如下所示

注意:如果要设置哪个组件会被缓存起来,就必须要额外的去指定组件的name属性

export default {
  name:'StudentAdd'
}

五、命名视图

1、给< router-view >指定名称:在使用时如没有给< router-view >设置名称,默认为default,可以定义多个路由视图,每个路由视图都指定名称

2、在路由表中给路由项添加components属性:将组件渲染到给定名称的视图中

六、声明式导航 & 编程式导航

1、声明式导航:以超链接方式实现的页面跳转,就是声明式导航

​ < a href=’url’> 链接文本或图像 < /a >

​ < router-link to=’url’ > 链接文本或图像 < /router-link >

2、编程式导航:通过javascript提供的api方法实现页面的跳转,就是编程式导航

​ location.href = 'url'

​ location.go(number)

​ location.replace(‘url’)

3、vue-router中提供的编程式导航的API

​ (1)this.$router.push(‘url’):将’url’添加到路由表中,增加了一条路由记录

​ (2)this.$router.replace(‘url’):跳转到url中,并替换掉当前的历史记录

​ (3)this.$router.go(number):参数是一个数值,页面跳转到指定的位置

​ (4)this.$router.go()的简化写法:

​ A、this.$router.back():后退

​ B、this.$router.forword():前进


本文转载自: https://blog.csdn.net/weixin_46672437/article/details/128635602
版权归原作者 。Idea 所有, 如有侵权,请联系我们删除。

“Vue2前端路由(vue-router的使用)、动态路由与导航守卫、路由和视图的命名以及声明式和编程式导航、”的评论:

还没有评论