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

目录

一、vue2的前端路由（vue-router）

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

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

3、前端路由：在前端维护一组路由规则（地址和组件之间的对应关系），模式有两种：

4、SPA：Vue适合开发单页面应用（Single Page Application）

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

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

7、示例：

8、vue-router中常用的方法

二、导航守卫

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

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

3、全局守卫：

代码示例:

三、动态路由 

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

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

3、$route和$router的区别：

四、命名路由

1、什么是命名路由?

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

4、路由懒加载

3、缓存路由组件

 五、命名视图

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

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

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

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

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

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

---

一、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
      },
      {