【Vue】vue-router 路由基础

目录

• ​​1. 路由的基本概念​​
• ​​2. vue-router 简介​​
• ​​3. vue-router 基本使用​​
• ​​4. 路由重定向​​
• ​​5. 嵌套路由​​
• ​​6. 动态路由匹配​​
• ​​7. 命名路由​​
• ​​8. 编程式导航​​

1. 路由的基本概念

路由分为两种：后端路由 和 前端路由

（1）后端路由是指根据不同用户的URL请求，返回不同的内容。它的本质就是URL请求地址与服务器资源之间的对应关系。

（2）前端路由是指根据不同的用户事件，显示出不同的页面。它的本质是用户事件和事件处理函数之间的对应关系。

2. vue-router 简介

vue-router是Vue.js官方的路由管理器，它包含的功能有：

• 支持HTML5历史模式或hash模式
• 支持嵌套路由
• 支持路田参数
• 支持编程式路由
• 支持命名路由
• 支持导航守卫
• 支持过渡动效
• 支持路由懒加载

3. vue-router 基本使用

vue-router的基本使用步骤：

1. 引入相关的库文件
2. 添加路由链接

• ​​router-link​​ 是vue中提供的标签，默认会被渲染为a标签
• ​​to​​属性默认会被渲染为href属性
• ​​to​​属性的值默认会被渲染为#开头的hash地址

3. 添加路由填充位

• 路由填充位也叫做路由占位符，将来通过路由规则匹配到的组件，将会被渲染到​​router-view​​ 所在的位置

4. 定义路由组件
5. 配置路由规则并创建路由实例

• ​​routes​​ 是路由规则数组
• 每个路由规则都是一个配置对象，其中至少包含​​path​​​ 和​​component​​ 两个属性:
• ​​path​​​表示当前路由规则匹配的​​hash​​ 地址
• ​​component​​表示当前路由规则对应要展示的组件

6. 把路由挂载到Vue根实例中

例如：

<div id="app">
      // 路由链接
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      // 路由占位符
      <router-view></router-view>
</div>

<script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
    })
</script>

4. 路由重定向

路由重定向是指：用户在访问A页面时，强制用户跳转到地址B，从而展示特定的组建页面。
通过路由规则的​​​redirect​​属性，指定一个新的路由地址就可以设置路由的重定向。

const router = new VueRouter({
        // 所有的路由规则
        routes: [
          // path表示需要被重定向的原地址，redirect表示将要被重新定向的新地址。
          { path: '/', redirect：'/user' },  
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
    })

5. 嵌套路由

<div id="app">
      // 路由链接
      <router-link to="/register">Register</router-link>
      // 路由占位符 
      <router-view></router-view>
</div>

<script>
      const Register = {
        template: '<div>
           <h1>Register 组件</h1>
           //子路由连接
           <router-link to="/register/tab1">tab1</router-link>
           <router-link to="/register/tab2">tab2</router-link>
           //子路由占位符
           <router-view></router-view>
        </div>'
      }
      // tab1、tab2是Register的两个子组件
      const tab1 = {
         template:'<h3> tab1 </h3>'
      }
      const tab2 = {
         template:'<h3> tab2 </h3>'
      }
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          //使用children数组表示子路由规则
          { path: '/register', component: Register, children:[
               { path: '/register/tab1', component: tab1},
               { path: '/register/tab2', component: tab2}
          ]}
        ]
      })
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
    })
</script>

6. 动态路由匹配

当我们需要设置多个路由链接时，可以使用动态路由的方式。

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

<div id="app">
      // 路由链接
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>

      // 路由占位符
      <router-view></router-view>
</div>

<script>
      const User = {
        // 在路由组件中，可以通过$route.params获取路由参数
        template: '<h1> User 组件——{{$route.params.id}}</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          // 动态路由参数由:开头
          { path: '/user/:id', component: User }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
    })
</script>

上面使用了​​$route.params​​​来获取路由参数，但是​​$route​​与对应路由形成高度耦合，所以我们可以使用props将组件与路由进行解耦。

1. props的值可以为布尔类型

const User = {
        props:['id'],  //使用props接收路由参数
        template: '<h1> User 组件——{{ id }}</h1>'
 }

// 创建路由实例对象
const router = new VueRouter({
   // 所有的路由规则
   routes: [
      //如果props被设置为true, route.params将会被设置为组件属性
      { path: '/user/:id', component: User ,props: true},
   ]
})

2. props的值可以为对象类型

const User = {
        props:['uname','age'],  //使用props接收路由参数
        template: '<h1> User 组件——{{ uname }}——{{ age }}</h1>'
 }

// 创建路由实例对象
const router = new VueRouter({
   // 所有的路由规则
   routes: [
      //如果props被设置为对象，组件中就只能访问这个对象，不能再访问id,且每个组件访问的都是这个对象
      { path: '/user/:id', component: User ,props: {uname:'zhangsan', age:18}}
   ]
})

3. props的值可以为函数类型

const User = {
        props:['id','uname','age'],  
        template: '<h1> User 组件——{{ id }}——{{ uname }}——{{ age }}</h1>'
 }

// 创建路由实例对象
const router = new VueRouter({
   // 所有的路由规则
   routes: [
      //如果props被设置为函数，这个函数接收route对象为自己的形参
      { path: '/user/:id', 
        component: User,
        props: route =>({uname:'zhangsan', age:18, id:route.params.id})
      }
   ]
})

7. 命名路由

为了更加方便的表示路由的路径，我们可以给路由规则起一个别名，这就是命名路由。

可以使用命名路由实现页面的跳转：

<div id="app">
      // 路由链接
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      // to使用:进行绑定，name表示跳转的路由名称，params表示携带的参数
      <router-link :to="{name:'user', params:{id:4}">User4</router-link>

      // 路由占位符
      <router-view></router-view>
</div>


const router = new VueRouter({
   routes: [
      { path: '/user/:id', 
        name:'user',  //设置路由名称
        component: User,
        props: route =>({uname:'zhangsan', age:18, id:route.params.id})
      }
   ]
})

8. 编程式导航

页面导航的方式有两种：声明式导航和编程式导航

（1）声明式导航是指通过点击连接实现导航，例如在普通网页中的​​<a></a>​​​连接、vue中的 ​​<router-link></router-link>​​

（2）编程式导航是指通过调用JavaScript的API来实现导航，例如普通网页中的​​location.href​​​、vue中​​this.$router.push ('hash地址')​​​和​​this.$router.go (n)​​

下面来看一下vue中的这两种编程式导航方式：

const User = {
    // 点击跳转到注册页面
    template: '<div><button @click= "goRegister">注册< /button></div>' ,
    methods: {
        goRegister: function() {
        //用编程的方式控制路由跳转
        this.$router.push('/register');
       }
   }
}

const Register = {
    // 点击后退到用户页面
    template: '<div><button @click= "goBack">返回< /button></div>' ,
    methods: {
        goBack: function() {
        //用编程的方式控制路由跳转
        this.$router.go(-1);
       }
   }
}

​​router.push()​​方法的参数：

（1）参数为字符串，表示路径名称

router.push('/home')

（2）参数为对象，表示path地址

router.push({path: '/home'})

（3）命名的路由，可以进行传参

router.push({name: '/user', params:{id:1}})

（4）带查询的参数，会转化为​​/register?uname=zhangsan​​

router.push({path: '/register'， query：{uname：'zhangsan'}})