Vue中路由的相关知识

最新推荐文章于 2023-01-01 21:55:17 发布

就是有点怕怕

最新推荐文章于 2023-01-01 21:55:17 发布

阅读量176

点赞数

分类专栏： vue相关知识文章标签： vue js

本文链接：https://blog.csdn.net/weixin_42371354/article/details/105011748

版权

vue相关知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.路由的概念

路由分为后端路由和前端路由。
1.后端路由：由服务器端进行实现，并完成资源的分发。
2.前端路由：依靠hash值(锚链接)的变化进行实现；根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系。

2.Vue-Router的使用

步骤：

引入js文件，vue-router.js需要依赖vue.js文件。
添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址。
添加路由填充位（路由占位符） -----router-view
定义路由组件
配置路由规则并创建路由实例
将路由挂载到Vue实例中

代码示例：

  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

    <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
     <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
    <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>

3.嵌套路由

进行路由的时候显示的组件中还有新的子级路由链接以及内容，这就成为路由的嵌套。

<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',
                    redirect: '/register/tab1',
                    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>

4.动态路由匹配

可以使用$router.params的方法获取相应的参数。
通过props获取参数，props为true、对象、函数时代表不同的含义。
props为true时在子组件中可以通过props属性直接获取相应的传递数据。形如：[‘id’]
props为对象时，子组件中可以获取传递对象中的对应属性值。形如：[‘name’,‘age’]
props为函数时，子组件中可以获取所有传递过去的值。形如：[‘id’, ‘uname’, ‘age’]

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

5.命名路由

在命名规则中通过name属性给对应路由命名。

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

6.编程式导航

导航的方式有两种：
1.声明式导航：通过点击链接的方式实现的导航
2.编程式导航：调用js的api方法实现导航

Vue-Router中常见的导航方式：
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });

this.$router.go( n );//n为数字，参考history.go
this.$router.go( -1 );

就是有点怕怕

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中路由的相关知识

1.路由的概念路由分为后端路由和前端路由。1.后端路由：由服务器端进行实现，并完成资源的分发。2.前端路由：依靠hash值(锚链接)的变化进行实现；根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系。2.Vue-Router的使用步骤：引入js文件，vue-router.js需要依赖vue.js文件。添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属...
复制链接

扫一扫