vue前端路由


  • 能够说出路由的概念
  • 能够说出vue-router的基本使用步骤
  • 能够说出vue-router的嵌套路由用法
  • 能够说出vue-router动态路由匹配用法
  • 能够说出vue-router命名路由用法
  • 能够说出vue-router编程式导航用法
  • 能够给予路由的方式实现业务功能

路由的基本概念与原理

前端路由是基于hash值的变化进行实现的(比如点击页面中的菜单或者按钮改变URL的hash值,根据hash值的变化来控制组件的切换)。核心实现依靠一个事件,即监听hash值变化的事件。

window.onhashchange = function(){
    //location.hash可以获取到最新的hash值
    location.hash
}

vue-router的基本使用

Vue Router 是Vue.js 官方的路由管理器,它和Vue.js的核心深度集成,可以非常方便的用于SPA应用程序开发。

基本使用步骤

  • 引入相关库文件
  • 添加路由链接
  • 添加路由填充位
  • 定义路由组件
  • 配置路由规则并创建路由实例
  • 把路由挂载到Vue跟实例中

路由重定向

路由重定向指的是:用户访问地址A的时候,强制用户跳转到地址c,从而展示特定的组件页面;通过路由规则的redirect属性,制定一个新的路由器地址,可以很方便地设置路由的重定向。

var router = new VueRouter({
  routes:{
    {path:'/',redirect:'/user'},
    {path:'/user',component:User},
    {path:'/register',component:Register}
  }
})

vue-router 嵌套路由

嵌套路由功能分析

  • 点击父级路由链接显示模板内容,模板内容中又有子级路由链接,点击子级路由链接显示子级模板内容。

    var router = new VueRouter({
      routes:{
        {path:'/user',component:user},
        {
          path:'/register',
          component:register,
          children:[
            {path:'/register/tab2',component:Tab1},
            {path:'/register/tab2',component:Tab2},
          ]
        }
      }
    })

vue- router 动态路由匹配

通过动态路由参数的模式进行路由匹配

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

// 通过 $route.params.id  在组件中访问

路由组件传递参数

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

  • Props 的值为布尔类型
var router = new VueRouter({
  routes:{
    // 动态路径参数 以冒号开开头
    {path:'/user/:id',component:User,props:true},
  }
})

const User = {
  props: ['id'],
  template: xxx
}
  • props 的值为对象类型

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

vue- router 命名路由

命名规则

为了更加方便的表示路由的路径,可以给路由器一个别名,即为命名路由。

var router = new VueRouter({
  routes:{
    {
      path:'/user/:id',
      name:'user'
      component:User
  	},
  }
})

<route-link :to="{name:'user',params:{id:123}}">User</router-link>
router.push({name:'user',params:{id:123}})

vue-router 编程式导航

  • 声明式导航:通过点击链接实现导航的方式,叫做声明式导航。例如普通网页中的链接或者vue中的
  • 编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航,例如普通网页中的 location.href

常用的编程式导航API

  • this.$router.push(‘hash地址’)

  • this.$router.go(n). //前进或者后退 n

    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"} });
    
    // 基本用法
    const User = {
      template: '<div><button @click="goRegister">跳转到注册页面</button></div>',
      methods:{
      goRegister:function(){
        this.$router.push('/register');
      }
    }
    } 

后台管理路由案例

路由的基础


文章作者: linxueya
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 linxueya !
评论
  目录
喜迎
春节