【Vue】Vue路由

---

Vue

四、Vue路由

01.基本概念

• 后端路由：

  • 含义：根据不同的用户URL请求，返回不同的内容
  • 本质：URL请求地址与服务器资源之间的对应关系

• SPA（Single Page Application）

  • 整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作

  • 实现原理：基于URL地址的hash值

    hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求

    ---

    监听 window 的onhashchange事件，可以获取到最新的hash值

    window.onhashchange = function(){
    	console.log(location.hash);					// 		#/index  
    console.log(location.hash.splice(1));		// 		 /index
    };
    

• 核心技术：前端路由

• 前端路由：

  • 概念：根据不同的用户事件，显示不同的页面内容
  • 本质：用户事件与事件处理函数之间的对应关系
  • 主要负责监听用户事件，触发事件后，通过事件函数渲染不同的内容

02.Vue Router

（1）功能：

• 支持HTML5历史模式/hash模式
• 支持嵌套路由
• 支持路由参数
• 支持编程式路由
• 支持命名路由

（2）基本使用

• 引入相关库文件

• 先导入vue.js文件，再入vue-router.js文件

• 添加路由链接

  <router-link to="/user"> User </router-link>
  

  <router-link>是VUE中提供的标签，默认会被渲染为 <a> 标签

  to 属性默认会被渲染为href属性

  to 属性的值默认会被渲染为 #开头的 hash 地址，如#/user

  这个值是下面定义的路由组件名

• 添加路由填充位

  <router-view> </router-view>
  

  路由填充位也称作路由占位符

  ：将来通过路由规则匹配到的组件，会被渲染到这个位置

• 定义路由组件

  const User = {
    template: "<h1> User 组件 </h1>"  
  };
  

• 配置路由规则并创建路由实例

  let router = new VueRouter({
      // routes 是路由规则数组
      routes: [
          { 
              path: "/user", 
              component: User
          }
      ]
  });
  

  每个路由规则都是一个配置对象，至少包含 path 和 component 属性：

  path 属性表示当前路由规则匹配的【hash地址】

  component 属性表示当前路由规则对应要展示的【组件】

• 把路由挂载到VUE根实例中

  let vm = new Vue({
      el: "#app",
      router: router
  });
  

（3）路由重定向

• 路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面；

• 通过路由规则的 redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向

  let router = new VueRouter({
      routes: [
          {
              path: "/",
              redirect: "/user"
          }
      ]
  });
  

  path 属性表示需要被重定向的原地址

  redirect 属性表示将要被重定向到的新地址

03.嵌套路由

（1）功能分析

• 父级路由链接的模板内容中又有子级路由链接

（2）定义嵌套路由组件模板

const Register = {
    template: `
		<h1>Register父级路由组件</h1>
		
		<!-- 子级路由链接 -->
		<router-link to="/register/tab1"> tab1 </router-link>
		<router-link to="/register/tab2"> tab2 </router-link>
		<!-- 子级路由占位符 -->
		<router-view></router-view>
	`
}

const tab1 = {
    template: "<h3>tab1 子组件内容</h3>"
}
const tab2 = {
    template: "<h3>tab2 子组件内容</h3>"
}

（3）配置嵌套路由规则

• 在父级路由规则中，通过 children 属性配置子级路由的规则

const router = new VueRouter({
    routes: [
        {
            path: "/register",
            component: Register,
            children: [
                {
                    path: "/register/tab1",
                    component: tab1
                },
                {
                	path: "/register/tab2",
                    component: tab2
                }
            ]
        }
    ]
});

04.动态路由匹配

（1）基本用法

• 动态路由匹配：即在某些路由规则中，有一部分是完全一样的，只有另一部分是动态变化的，那么可以把动态变化的这一部分形成路由参数

• 通过动态路由参数的模式进行路由匹配

  • 在路由规则中，把动态变化的部分前面加上冒号:，冒号后面的名字即参数名
  • 在路由组件定义中通过$route.params获取路由参数

  let router = new VueRouter({
     routes: [
         {
             path: "/user/:id",
             component: User
         }
     ]
  });
  
  const User = {
      template: "<h1> User  {{ $route.params.id }} </h1>"
  }
  

（2）路由组件传参

• 使用props将组件和路由解除耦合

（i）设置props的值为布尔类型

const router = new VueRouter({
   routes: [
       {
           path: "/user/:id",
           component: User,
           props: true
       }
   ] 
});

将props设置为 true，那么route.params可以通过组件定义中的属性props来接收路由参数，再通过插值表达式使用理由参数

const User = {
    props: ["id"],
    template: "<h1> User, {{ id }} </h1>"
}

（ii）设置props的值为对象类型

const router = new VueRouter({
   routes: [
       {
           path: "/user/:id",
           component: User,
           props: {
               name: "Ruovan",
               age: 24
           }
       }
   ] 
});

将props设置为对象形式以存储参数，此时路由参数冒号:后面的参数失效；再通过组件定义中的props属性接收参数

const User = {
    props: ["name", "age"],
    template: "<h1> User, {{ name + "----" + age }} </h1>"
}

（iii）设置props的值为函数类型

const router = new VueRouter({
   routes: [
       {
           path: "/user/:id",
           component: User,
           props: (route) => {
               name: "Ruovan",
               age: 24,
               id: route.params.id
           }
       }
   ] 
});

设置为函数类型，可以将路由参数冒号:后面的参数一起传入组件定义的props属性中

const User = {
    props: ["name", "age", "id"],
    template: "<h1> User, {{ name + "----" + age + "----" + id }} </h1>"
}

05.命名路由

• 为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”

const router = new VueRouter({
   routes: [
       {
           path: "/user/:id",
           component: User,
           name: "user"
       }
   ] 
});

通过路由规则中的name属性给路由规则进行命名

然后在<router-link>元素中使用:to指定要跳转的路由

<router-link :to="{name:'user', params:{id:123}}"> User </router-link>

06.编程式导航

（1）页面导航的两种方式

• 声明式导航：通过点击链接实现导航的方式

  如：普通网页中的<a>标签、VUE中的<router-link>标签

• 编程式导航：通过调用JavaScript形式的API实现导航的方式

  如：普通网页中的location.href

（2）编程式导航的基本用法

• this.$router.push("hash地址")

• this.$router.go(n)

  n=1，在历史记录中向前进

  n=-1，在历史记录中向后退

const User = {
    template: "<button @click="goRegister">跳转页面</button>",
    methods: {
    	goRegister: function(){
            this.$router.push("/register");
        }
	}
}

---

（未完待续~~~）