• 首页

  • 文章归档

  • 关于页面

  • 友链
潇 潇 暮 雨
潇 潇 暮 雨

潇潇暮雨

获取中...

01
14
Vue

vue路由

发表于 2020-01-14 • 被 506 人看爆

路由的基本概念

路由是一个比较广义和抽象的概念,路由的本质就是一种对应关系.
前端路由的基本概念:根据不同的事件来显示不同的页面内容,即事件与事件处理函数之间的对应关系

vue-router的基本使用

  • 介绍

    • 它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用
    • Vue Router和Vue.js非常契合,可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发
    • Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue Router
    • 官网:https://router.vuejs.org/zh/
  • Vue Router的特性:

    • 支持H5历史模式或者hash模式
    • 支持嵌套路由
    • 支持路由参数
    • 支持编程式路由
    • 支持命名路由
    • ....
  • 基本使用步骤

    • 1.导入js文件
    // 导入vue文件
    <script src="./lib/vue_2.5.22.js"></script>
    
    //导入vue-router文件
    <script src="./lib/vue-router_3.0.2.js"></script>
    
    • 2.添加路由链接
    // router-link 是vue 中提供的标签,默认会被渲染为a标签
    
    // to属性默认会被渲染为 href 属性
    
    // to属性的值默认会被渲染为#开头的hash地址
    
    <router-link to='/user'>User</router-link>
    
    • 3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
    //路由填充位也叫做路由占位符
    
    <router-view></router-view>
    
    • 4.定义路由组件
    var User = {
    template:'<div>User</div>'
    }
    
    • 5.配置路由规则并创建路由实例
         // 创建路由实例对象
        const router = new VueRouter({
       // 所有的路由规则 (与之前的onhashchange的目的是一样的)
          routes: [//这个就是前端路由的具体体现
        // 每一个路由规则都是一个对象,包含path和component属性
            { path: '/user', component: User }
          ]
        })
    
    • 6.将路由挂载到Vue实例中
     // 创建 vm 实例对象
        const vm = new Vue({
          // 指定控制的区域
          el: '#app',
          data: {},
          // router: router
          router
        })
    

路由重定向

router-view默认显示的组件,需要通过路由重定向来实现

const router = new VueRouter({
    // 所有的路由规则
    routes: [
        { path: '/', redirect: '/user'},//增加这一行代码,如果访问跟路径/,则重定向到/user
        { path: '/user', component: User },
        { path: '/register', component: Register }
    ]
})

嵌套路由

//1.父路由组件模板
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

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

//2. 子路由模板
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>`
      }

//3.路由嵌套配置
      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 }
          ] }
        ]
      })

动态路由匹配

  • 匹配规则定义时,动态路由语法为 :参数名,以冒号开头,就代表是动态匹配
  • 路由组件定义时,获取路由参数为:{{$route.params.参数名}}
  • $route.params.是固定写法
  • Vue实例的属性,都是$开头,比如$el
// 创建 vm 实例对象
const vm = new Vue({
  // 指定控制的区域
  el: '#app',
  data: {},
  // 挂载路由实例对象
  // router: router
  router
})
  • 创建Vue实例时,传递的参数有:el,data,router
  • 那么vm有了$el,$data,$router属性
  • 但是获取动态参数,是**{{$route.params.参数名}}**
  • $route是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-view></router-view>
  </div>
  const User = {
      template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'
    }
    // 创建路由实例对象
    const router = new VueRouter({
      // 所有的路由规则
      routes: [
        { path: '/', redirect: '/user'},
        { path: '/user/:id', component: User }
      ]
    })

    // 创建 vm 实例对象
    const vm = new Vue({
      el: '#app',
      data: {},
      router
    })

路由组件传递参数

  1. props的值为布尔类型
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: true }
        ]
      })
      const User = {
        props: ['id'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }

在组件的模板中,可以通过插值表达式访问到data和props中的数据属性.
路由定义规则中:props:true,代表给动态参数id,开启props传参(其实就是通过props方式传递参数)

  1. props的值为对象类型
const User = {
        props: ['id', 'uname', 'age'],
        //这个id其实是拿不到值的
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为:{{age}}</h1>'
      }
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } }
        ]
      })
  1. props的值为函数类型
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          }
        ]
      })
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为:{{age}}</h1>'
      }

命名路由

 const router = new VueRouter({
  routes:[
  {
   path:'/user/:id',
   name:'user',
   component:User
   }
 ]
})
<router-link :to="{ name: 'user', params: {id: 3}}">User3</router-link>

编程式导航

 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)//-1:后退1个界面
          }
        }
      }

  • push跳转锚点
  • go前进后退,参数n一个数字,代表前进后退几个界面
    • n,代表前进n个界面
    • -n,代表后退n个界面
  • push参数
//字符串(路径名称)
 router.push('/home')

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

//命名的路由(传递参数)
router.push({name:'/user',params:{userId:123}})

//带查询参数,变成/register?name=lisi
router.push({path:'/register',query:{uname:'lisi'}})
vue学习笔记
Vue电商后台项目总结
  • 文章目录
  • 站点概览
潇潇暮雨

小姐姐潇潇暮雨

逗比肖~

Copyright © 2022 潇潇暮雨 · 19043744

Proudly published with Halo · Theme by ruby woo · RSS