Vue Router 路由管理器

已于 2022-11-14 19:58:41 修改
阅读量59 收藏
点赞数
分类专栏： Vue Router 前端路由 文章标签： vue
于 2020-10-28 23:44:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41390219/article/details/109299873
版权

 

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_702020102623352244.png

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

<!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>

20201027221251795.png

 <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>

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

<!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: `<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>

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

<!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>

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

 <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'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }

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

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

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

 watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

<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>

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

<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: route => ({ uname: 'zs', age: 20, id: route.params.id })
        },
        { path: '/register', component: Register }
      ]
    })

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

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

<body>
  <!-- 被 vm 实例所控制的区域 -->
  <div id="app">
    <router-link to="/user/1">User1</router-link>
    <router-link to="/user/2">User2</router-link>
    <router-link :to="{ name: 'user', params: {id: 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' },
        {
          // 命名路由
          name: 'user',
          path: '/user/:id',
          component: User,
          props: route => ({ uname: 'zs', age: 20, id: route.params.id })
        },
        { path: '/register', component: Register }
      ]
    })

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

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70 watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTM5MDIxOQ==,size_16,color_FFFFFF,t_70

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <router-link to="/register">Register</router-link>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: `<div>
          <h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>
          <button @click="goRegister">跳转到注册页面</button>
        </div>`,
        methods: {
          goRegister() {
            this.$router.push('/register')
          }
        },
      }
      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <button @click="goBack">后退</button>
        </div>`,
        methods: {
          goBack() {
            this.$router.go(-1)
          }
        }
      }
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

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

 

 

Mint520
关注
专栏目录
vue 路由重定向与嵌套路由
缚己
01-27 634
路由重定向 路由重定向是指：用户访问 A 地址时，强制用户跳转到 B 地址，例如访问 localhost 强制跳转到 localhost/index 页面。 主要通过路由规则的 redirect 属性，属性值为要跳转的重定向地址，如下代码所示： // 配置路由规则，创建路由实例 const router = new VueRouter({ // 路由规则数组 routes: [ // { path: '/', redirect: '/list' }, { path: '/index'
Vue嵌套路由
前端开发-陈善强
11-29 232
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equi...
vue-router基础（二）动态路由匹配
hrbsfdxzhq01的博客
02-15 779
我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果  const User = { template: '&lt;div&gt;User&lt;/div&gt;' } const router = new VueRouter({ ...
Vue-动态路由匹配
世界和我们都不该止步于此
05-13 1133
目录 动态路由匹配操作 方法1：在Vue实例中逐层寻找 方法2：当前路由规则开启props传参，拿到动态参数值 动态路由匹配可以提高路由规则的复用性 什么意思呢？ 假如我们有很多的商品展示，每一个商品都需要有对应的详情展示页 难道我们要写上万个甚至更多的路由规则吗？ <!-- 假如现在有四个商品 --> <router-link to="/Move/1">商品1</router-link> <router-link to="/Move/2"&gt.
vue动态路由匹配
wfly blog
10-30 251
什么是动态路由匹配 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在vue-router的路由路径中使用动态路径参数来达到这个效果 示例： 这是公共的组件 （DynamicRouteDemo.vue） <template> <div> ...
浅谈Vue.js路由管理器 Vue Router
10-18
Vue.js路由管理器Vue Router是Vue.js官方的路由管理器，它和Vue.js深度集成，用于构建单页面应用程序。Vue Router允许你通过定义不同的路由来匹配不同的URL，当用户访问不同的路由时，可以在一个应用内渲染不同的...
vue router路由嵌套不显示问题的解决方法
08-30
在Vue.js应用中，Vue Router是官方推荐的路由管理库，它允许我们通过URL来控制组件的切换，实现单页应用（SPA）的导航。在实际开发中，路由嵌套是一种常见且强大的功能，用于构建复杂的页面结构。然而，有时在配置...
解决vue+router路由跳转不起作用的一项原因
11-20
Vue Router是官方推荐的路由库，它允许我们定义动态、嵌套路由，并提供多种导航控制方式。在这个问题中，我们将深入探讨为什么在某些情况下，`vue-router`的路由跳转可能不起作用，以及如何通过设置`mode: 'history'...
22_VueRouter路由使用.pdf
10-07
VueRouter路由使用.pdf VueRouter是Vue.js的官方路由，它与Vue.js核心深度集成，让用Vue.js构建单页应用变得非常容易。Vue Router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来。在VueRouter的...
Vue.js动态路由匹配
BoringError的博客
12-10 1131
文章目录一、动态路由简单使用二、用v-bind和v-for完成一个动态路由 更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页 一、动态路由简单使用 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(...
Vue路由篇之动态路由匹配
01-08
Vue路由篇之动态路由匹配 详情请见注释 .active{ font-size: 100px; color:red } 前端研发 职位 搜索 const position={//定义局部组件 template:` position ` } const search={
vue-router 动态路由匹配
←か淡定☆ ヾ 的博客
12-03 934
目录1. 动态匹配路由的基本用法2. 路由组件传递参数2.1 1. props 的值为布尔类型2.1.2 props 的值为对象类型2.1.3 props的值为函数类型 1. 动态匹配路由的基本用法 【应用场景】：通过动态路由 参数 的模式进行路由匹配。 var router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] }) 即在路由规则中，把动态的部分在前面加上冒
Vue Router系列之动态路由匹配
老__L的博客
12-11 1547
动态路由匹配
vue开发：vue动态路由匹配
Generon的博客
01-15 1292
/user/foo     /user/bar     const User = {   template: `User {{ $route.params.id }}` } const router = new VueRouter({   routes: [     { path: '/user/:id', component: User }   ]
Vue-router动态匹配
最新发布
wazj733的博客
05-11 451
动态路由
浅谈vue之动态路由匹配
weixin_30639719的博客
01-23 127
在日常开发过程中，可能会遇到一些类似于新闻详情页的内容，需要把所有详情页映射到同一组件上，这是动态路由匹配的应用场景之一。在使用的过程中，也遇到过一些小坑，此篇做个简要的总结说明： 基本使用 1 { 2 path: 'newsDetail/:uid', 3 name: 'newsDetail', 4 component: N...
21Vue-动态路由匹配
行走的皮卡丘
08-08 389
21 Vue-动态路由匹配
Vue 中路由传参（动态路由匹配）
Tianxiaoxixi的博客
07-04 1268
Vue 中路由传参（动态路由匹配）
五、vue学习之动态路由匹配
码
05-13 211
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue动态路由匹配</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router.js" type="text/ja.
Vue.js入门教程：深入理解vue-router路由管理
"Vue.js框架入门系列教程，涵盖了Vue的基础语法和组件使用，以及Vue Router路由管理器的介绍。文章旨在帮助读者理解前端路由的概念，特别是在单页面应用中的作用，并通过实例展示了如何在Vue中使用vue-router进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值