Vue Router路由及路由重定向

最新推荐文章于 2024-10-18 15:59:46 发布

向前有光

最新推荐文章于 2024-10-18 15:59:46 发布

阅读量2.1k

点赞数 1

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40666120/article/details/106081156

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue的核心深度集成，可以非常方便的用于SPA应用程序的开发。

实现路由功能七大步骤

第一步：引入相关的库文件

注意：必须先引用Vue，在引用vue-router 顺序不能颠倒

<!-- 导入 vue 文件 -->
<script src="vue.js"></script>
<script src="vue-route.js"></script>

第二步：添加路由链接

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

 <div id="app">
      <router-link to="/index">index</router-link>
      <router-link to="/my">my</router-link>
 </div>

第三步：路由填充位

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

 <div id="app">
      <router-link to="/index">index</router-link>
      <router-link to="/my">my</router-link>
      <!-- 路由占位符 -->
      <router-view></router-view>
</div>

第四步：定义路由组件

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

第五步：配置路由规则和创建实例

// 创建路由实例对象
      const router = new VueRouter({
        // routes 是路由规则数组
        routes: [
	        //每个路由规则都是一个配置对象，其中至少包含path 和component 两个属性:
			// path表示当前路由规则匹配的hash地址
			// component 表示当前路由规则对应要展示的组件
			
          { path: '/index', component: index},
          { path: '/my', component: my}
        ]
})

第六步：挂载路由

为了能够让路由规则生效，这里就需要把路由挂载到vue实例对象上

 // 创建 vm 实例对象
      const vm = new Vue({
      // 指定控制的区域
      el: '#app',
      data: {},
      // 挂载路由实例对象
      // router: router   es6中名字一致时可以简写的
      router
})

第七步：重定向功能

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址B，从而在展示特定的组件页面(相当于在点击跳转一个页面的时候设置一个默认显示的内容区域)
通过路由规则的redirect 属性,指定一个新的路由地址，可以很方便地设置路由的重定向

这里我们来改造第五步骤中的内容

// 创建路由实例对象
      const router = new VueRouter({
        // routes 是路由规则数组
        routes: [
	        //每个路由规则都是一个配置对象，其中至少包含path 和component 两个属性:
			// path表示当前路由规则匹配的hash地址
			// component 表示当前路由规则对应要展示的组件
			//其中，path表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址
          { path: '/', redirect: '/index'},
          { path: '/index', component: index},
          { path: '/my', component: my}
        ]
})

案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/index">index</router-link>
      <router-link to="/my">my</router-link>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
    <script>
      const index = {
        template: '<h1>index 组件</h1>'
      }
      const my = {
        template: '<h1>my 组件</h1>'
      }
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          //路由重定向  redirect  表示要重定向到的新地址
          { path: '/', redirect: '/index'},
          { path: '/index', component: index },
          { path: '/my', component: my }
        ]
      })
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        router
      })
    </script>
  </body>
</html>