二、Vue Router-核心内容精讲

已于 2023-05-08 02:54:04 修改
阅读量227 收藏 1
点赞数
分类专栏： Vue体系知识点 文章标签： vue.js 前端 javascript 路由 Vue Router
于 2023-05-07 02:32:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41994396/article/details/130516510
版权

Vue Router

一、Vue Router 回顾

1、路由简介

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

在开发中，路由分为：

  • ​ 后端路由
  • ​ 前端路由

后端路由

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

在这里插入图片描述

SPA（Single Page Application）

  • Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
  • SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内 容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
  • SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历 史的变化、但是hash的变化不会触发新的URL请求
  • 在实现SPA过程中，最核心的技术点就是前端路由

前端路由

  • 概念：根据不同的用户事件，显示不同的页面内容
  • 本质：用户事件与事件处理函数之间的对应关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QXeUASg7-1683296278716)(images/前端路由.png)]

2、实现简易前端路由

基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

在这里插入图片描述

案例代码实现如下：

<!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="./lib/vue_2.5.22.js"></script>
  </head>
  <body>
    <!-- 被 vue 实例控制的 div 区域 -->
    <div id="app">
      <!-- 切换组件的超链接 -->
      <a href="#/zhuye">主页</a> 
      <a href="#/keji">科技</a> 
      <a href="#/caijing">财经</a>
      <a href="#/yule">娱乐</a>

      <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
      <!-- 可以把 component 标签当做是【组件的占位符】 -->
      <component :is="comName"></component>
    </div>

    <script>
      // #region 定义需要被切换的 4 个组件
      // 主页组件
      const zhuye = {
     
        template: '<h1>主页信息</h1>'
      }

      // 科技组件
      const keji = {
     
        template: '<h1>科技信息</h1>'
      }

      // 财经组件
      const caijing = {
     
        template: '<h1>财经信息</h1>'
      }

      // 娱乐组件
      const yule = {
     
        template: '<h1>娱乐信息</h1>'
      }
      // #endregion

      // #region vue 实例对象
      const vm = new Vue({
     
        el: '#app',
        data: {
     
          comName: 'zhuye'
        },
        // 注册私有组件
        components: {
     
          zhuye,
          keji,
          caijing,
          yule
        }
      })
      // #endregion

      // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
      window.onhashchange = function() {
     
        // 通过 location.hash 获取到最新的 hash 值
        console.log(location.hash);
        switch(location.hash.slice(1)){
     
          case '/zhuye':
            vm.comName = 'zhuye'
          break
          case '/keji':
            vm.comName = 'keji'
          break
          case '/caijing':
            vm.comName = 'caijing'
          break
          case '/yule':
            vm.comName = 'yule'
          break
        }
      }
    </script>
  </body>
</html>

3、vue-router的基本使用

Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。 它和 Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。

基本使用的步骤：

  1. 引入相关的库文件
  2. 添加路由链接
  3. 添加路由填充位
  4. 定义路由组件
  5. 配置路由规则并创建路由实例
  6. 把路由挂载到 Vue 根实例中

下面看一下具体的实施过程

  1. 引入相关的库文件
<!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 -->   
<script src="./lib/vue_2.5.22.js"></script> 
 
<!-- 导入 vue-router 文件，为全局 window 对象挂载 VueRouter 构造函数 --> 
<script src="./lib/vue-router_3.0.2.js"></script>
  1. 添加路由链接
<!-- router-link 是 vue 中提供的标签，默认会被渲染为 a 标签 -->
<!-- to 属性默认会被渲染为 href 属性 -->
<!-- to 属性的值默认会被渲染为 # 开头的 hash 地址 --> 
<router-link to="/user">User</router-link> 
<router-link to="/register">Register</router-link>
  1. 添加路由填充位
<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置 -->   
<router-view></router-view>
  1. 定义路由组件
 var User = {
    
     template: '<div>User</div>' 
  } 
  var Register = {
    
     template: '<div>Register</div>' 
  }
  1. 配置路由规则并创建路由实例
 // 创建路由实例对象   
var router = new VueRouter({
        
    // routes 是路由规则数组     
    routes: [       
        // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：   
        // path 表示当前路由规则匹配的 hash 地址     
        // component 表示当前路由规则对应要展示的组件     
       {
   path:'/user',component: User}, 
      {
   path:'/register',component: Register} 
    ] 
  })
  1. 把路由挂载到 Vue 根实例中
 new Vue({
    
     el: '#app',    
     // 为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上      
     router 
  });

完整代码实现如下：

<!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="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <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>
  </body>
</html>

4、路由重定向

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

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

var router = new VueRouter({
    
    routes: [      
        // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址  
        //当用户在地址栏中输入`/`,会自动的跳转到`/user`,而`/user`对应的组件为User
       {
   path:'/', redirect: '/user'}, 
      {
   path:'/user',component: User}, 
      {
   path:'/register',component: Register} 
    ] 
  })

具体实现的代码如下：

<!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="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <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: '/', redirect: '/user'},
          {
      path: '/user', component: User },
          {
      path: '/register', component: Register }
        ]
      })

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

5、嵌套路由

嵌套路由功能分析

点击父级路由链接显示模板内容

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

点击子级路由链接显示子级模板内容

在这里插入图片描述

下面看一下实现的步骤

父路由组件模板

  • 父级路由链接
  • 父组件路由填充位
<p> 
      <router-link to="/user">User</router-link> 
      <router-link to="/register">Register</router-link> 
 </p> 
    <div>      
        <!-- 控制组件的显示位置 -->       
        <router-view></router-view> 
    </div>

以上的内容，在前面的课程中已经实现。

子级路由模板

  • 子级路由链接
  • 子级路由填充位
 const Register = {
    
    template: `<div>    
			<h1>Register 组件</h1>     
			<hr/> 
      <router-link to="/register/tab1">Tab1</router-link> 
      <router-link to="/register/tab2">Tab2</router-link>  
      <!-- 子路由填充位置 -->       
		<router-view/> 
    </div>` 
  }

嵌套路由配置

父级路由通过children属性配置子级路由

 const router = new VueRouter({
      
     routes: [      
         {
    path: '/user', component: User },      
         {
     path: '/register', component: Register,         
          // 通过 children 属性，为 /register 添加子路由规则        
          children: [ 
              {
    path: '/register/tab1', component: Tab1 },          
              {
    path: '/register/tab2', component: Tab2 }        
          ]       
         }     
     ]   
 })

具体代码实现如下：

<!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="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <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>'
      }
     //修改Register组件
      const Register = {
     
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>

          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }

      const Tab1 = {
     
        template: '<h3>tab1 子组件</h3>'
      }

      const Tab2 = {
     
        template: '<h3>tab2 子组件</h3>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
     
        // 所有的路由规则
        routes: [
          {
      path: '/', redirect: '/user'},
          {
      path: '/user', component: User },
          // 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>
  </body>
</html>

6、动态路由匹配

6.1 动态匹配路由的基本用法

思考：

<!– 有如下 3 个路由链接 --> 
<router-link to="/user/1">User1</router-link> 
<router-link to="/user/2">User2</router-link> 
<router-link to="/user/3">User3</router-link> 

// 定义如下三个对应的路由规则，是否可行？？？
{
    path: '/user/1', component: User } 
{
    path: '/user/2', component: User } 
{
    path: '/user/3', component: User }

虽然以上规则可以匹配成功，但是这样写比较麻烦。如果有100个规则，那么写起来就会非常的麻烦。

通过观察，可以发现整个路由规则中只有后续的数字是在变化的。所以这里可以通过动态路由参数的模式进行路由匹配。

var router = new VueRouter({
    
  routes: [     
      // 动态路径参数 以冒号开头     
      {
    path: '/user/:id', component: User } 
  ] 
}) 

const User = {
      
    // 路由组件中通过$route.params获取路由参数 
    template: '<div>User {
   { $route.params.id }}</div>' 
}

具体代码实现如下：

<!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="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <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-link to="/register">Register</router-link>

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

    <script>
      const User = {
     
        template: '<h1>User 组件 -- 用户id为: {
     {$route.params.id}}</h1>'
      }

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

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

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

6.2 路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

第一种情况：

props的值为布尔类型

 const router = new VueRouter({
    
    routes: [       
        // 如果 props 被设置为 true，route.params 将会被设置为组件属性     
        {
    path: '/user/:id', component: User, props: true } 
    ] 
  }) 
 
  const User = {
    
            props: ['id'], // 使用 props 接收路由参数     
                template: '<div>用户ID：{
   { id }}</div>'  // 使用路由参数   
  }

在定义路由规则的时候，为其添加了props属性，并将其值设置为true.那么在组件中就可以通过props:['id']的形式来获取对应的参数值。

具体代码如下：

<!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="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <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-link to="/register">Register</router-link>

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

    <script>
      const User = {
     
        props: ['id'], //获取id的值。
        template: '<h1>User 组件 -- 用户id为: {
     {id}}</h1>'
      }

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

      // 创建路由实例对象
      const router = new VueRouter({
     
        // 所有的路由规则
        routes: [
          {
      path: '/', redirect: '/user'},
            //将props设置为true.
          {
      path: '/user/:id', component: User, props: true },
          {
      path: '/register', component: Register }
        ]
      })

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

第二种情况： props的值为对象类型

 const router = new VueRouter({
    
    routes: [       
        // 如果 props 是一个对象，它会被按原样设置为组件属性   
        //这里相当于给组件User,通过路由的形式传递了一个对象，而这时候id在User组件中就无法获取到了。
        {
    path: '/user/:id', component: User, props: {
    uname: 'lisi', age: 12 }} 
    ] 
  }) 
 
  const User = {
    
    props: ['uname', 'age'],   
      template: ‘<div>用户信息：{
   {
    uname + '---' + age}}</div>'  
}

具体代码实现如下：

<!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="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <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-link to="/register">Register</router-link>

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

    <script>
      const User = {
     
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {
     {id}} -- 姓名为:{
     {uname}} -- 年龄为：{
     {age}}</h1>'
      }

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

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

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

在上面的代码中，在路由规则中，通过props向用户组件中传递了一个对象，那么在User用户组件中可以接收到传递过来的对象。但是参数id无法接收到。

如果要解决这个问题，可以使用props的值为函数类型。也就是给props传递一个函数。

第三种情况：props的值为函数类型

const router = new VueRouter({
    
    routes: [       
        // 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参  
        //route就是参数对象。
        {
    path: '/user/:id',  
        component: User,  
        props: route => ({
    uname: 'zs', age: 20, id: route.params.id })} 
    ] 
  }) 
 
  const User = {
    
    props: ['uname', 'age', 'id'],    
      template: ‘<div>用户信息：{
   {
    uname + '---' + age + '---' + id}}</div>'  
}

完整代码如下：

<!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="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <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-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
最低0.47元/天 解锁文章
心静如莲_心如止水
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue核心插件之一 vue-router
Xiaoxiao_Zheng的博客
05-06 288
1 安装vue-router 1）官网上下载，通过src引入js文件 2）npm 安装 npm install vue-router 2 router实现跳转，这里通过构建vue项目 main.js主文件； App.vue文件; 跳转的两个页面:hello.vue add HelloWorld.vue 路由配置文件index.js 1）main.js配置 引入相应的文件 ...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-router 介绍
JineD的博客
05-29 8248
vue-router实现原理 SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是:更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。 1、hash模式 随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅
vue-router核心概念
weixin_30404405的博客
02-14 113
vue用来实现SPA的插件 使用vue-router 1. 创建路由器: router/index.js new VueRouter({ routes: [ { // 一般路由 path: '/about', compon...
Vue全家桶 Vue-router的详细介绍
m0_71485750的博客
07-31 1148
在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器事实上，路由器主要维护的是一个映射表；映射表会决定数据的流向；...
vue 笔记（十三）vue-router
孤注一掷的博客
05-30 248
Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。 index.html 调用 main.js 调用 App.vue 1.删去原始项目中的没用的东西，只留下这两个 2.安装vue-router，使用下面的命令 npm install vue-router --save-dev 3.components目录下存放我们自己编写的组件 <!--Content.vue--> <template>.
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
vue-router-view-transition:使用scrollBehavior正确地进行超时转换
03-10
vue-router-view-transition 与scrollBehavior兼容的路由器视图的过渡包装器 安装 npm install vue-router-view-transition # or yarn add vue-router-view-transition 用法 该库导出一个组件和一个函数。 您需要...
Vue-Vue-Router-Vuex-SSR:Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲
05-16
Vue-Vue-Router-Vuex-SSRVue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲
vue-router 中router-view不能渲染的解决方法
12-08
最近在做一个vue的项目，其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。 项目目录结构 其中main.js import Vue from 'vue'; ...
vue-router的基本介绍
linglingzi001的博客
08-26 700
vue-router 什么是路由 路由是一个网络工程里面的术语 路由就是通过网络把信息从源地址传输到目的地的活动 — 维基百科 后端路由 是url和后端逻辑的对应关系 前端路由 是url和组件的对应关系 前端路由核心就是改变url但是页面不进行整体的刷新 前端路由规则 url的hash url的hash也就是锚点(#),本质上是改变window.location的href属性 我们可以直接通过location.hash来改变href 但不刷新页面 vue-router vue-router是vue官方的路
Vue核心知识--Router
任性的wo的博客
09-23 247
目录 Vue-router之集成 Vue-router之路由参数传递 Vue-router之导航守卫 全局前置守卫： 全局解析守卫 全局后置钩子 路由独享的守卫 组件内的守卫 完整的导航解析流程 Vue-router之集成 index.js： import Vue from 'vue' import Router from 'vue-router' import rou...
Vue-Router核心原理实现(文末附手写版源码)
2024路在何方
01-01 805
VueRouter的核心原理 一、VueRouter的核心组成部分 主要实现以下几部分： mode this.router/this.router/this.router/this.route router-link/router-view Vue.use注册插件 1、mode 在vueRouter中，主要分为两种模式，一种是hash，一种是history。 hash模式是通过监听...
Vue-Router核心原理实现
mxydl2009的博客
07-17 516
vue-router基本使用 配置路由文件 // 路由配置文件router/index.js // 导入vue和vue-router import Vue from 'vue' import VueRouter from 'vue-router' // 导入首页视图文件 import Index from '../views/Index.vue' // 注册路由插件 // Vue.use()用来注册插件，会调用传入对象的install方法 Vue.use(VueRouter) // 定义路由规则，即
vue-router 详解
Masisol
08-14 148
目录 介绍 使用方法 基础知识 导航守卫 Keep-alive 介绍 vue-router是vue.js得官方路由管理器。 优点：体验好，不需要每次从服务器获取全部，快速得展示给用户 缺点：浏览器每次前进 / 倒退时都需重新发起请求；单页应用前进 / 倒退时无法记住滚动位置。 使用方法 npm install vue-router -save src 目录下 新...
Vue学习----vue-Router详解
https://juejin.cn/user/4248168663101239/posts
01-27 640
vue-router详解一. 路由介绍二. 前端路由的核心三. URL的hash模式四. HTML5的history模式五. vue-router介绍六. 安装和使用vue-router1. 安装vue-router2. Vue.use()来安装路由功能3. 使用vue-router的步骤七. 路由的默认路径八. HTML5的History模式九. router-link详细解析十. 修改linkActiveClass十一. 使用Javascript代码路由跳转十二. 路由的懒加载十三. 嵌套路由十四. 路
umi项目部署在非根目录下，多路由指向的情况解决方法
热门推荐
小记心得
07-16 2万+
本篇，只在umi项目非常熟练的情况下，如不清楚，可去umi官方文档了解。 一，需求： 1号地址：http://abc.abc.com/aaa 众所周知umi项目要部署在非根目录下，配置base必须为某个目录，即base:'/aaa/' 进入项目后，路由会自动以‘/aaa’为前缀，跳转正常， 例如： （1）点击‘关于我们’，会路由到http://abc.abc.com/aaa/about 二，需...
Ant Design Pro 2.0/umijs站点配置到非站点根目录下处理
草宝虫的博客
11-03 1万+
1.config/config.js中 export default {中加上如下： history: 'hash', //采用hash路由：#/xxx的形式 base:'./', publicPath:'./', （会自动将/static/xxx.jpg之类的和umi.js中的a.p="/"及index.html中window.routerBase中该值进行替换） 2.生成出来的di...
Vue Router 简介
官方推荐
01-29 703
Vue Router 简介；router是什么？
vue router-link
最新发布
03-29
Vue Router是Vue.js官方的路由管理器，它允许你在Vue应用中实现页面之间的导航。而router-link是Vue Router提供的一个组件，用于在Vue应用中创建导航链接。 router-link组件可以被用来代替传统的`<a>`标签，它会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值