美文网首页
vue-router

vue-router

作者: a不知所谓 | 来源:发表于2018-05-22 15:04 被阅读0次

    一: 使用路由
    引入组件
    配置路由
    创建路由实例
    创建Vue实例,挂载路由
    二: 两个标签
    (1) <router-view />
    路由出口
    路由匹配到的组件将渲染在这里
    (2)<route-link to/>
    使用 router-link 组件来导航.,通过传入 to 属性指定链接 ,<router-link> 默认会被渲染成一个 <a> 标签

    三: 两个属性
    this.$router 全局路由对象,用来跳转
    this.$route 当前页面路由信息
    四:路由操作Api
    路由跳转
    (1) 通过路径跳转
    this.$router.push({path:'/message', query:{x:1,y:2}}) (query传参显示)
    (2)通过路由name跳转
    this.$router.push({name:'Shopping', params:{a:3,b:4}}); (params传参隐藏)
    路由回退 back() 回到上一页
    路由前进 forward() 去往下一页
    路由替换并不加入历史记录 replace()
    路由任意跳转 go(index),去到相对当前页面的index页面
    五:嵌套路由
    声明在路由的children属性里,并在组件中添加router-view标签
    命名路由
    配置路由的时候增加name属性,可以通过push({name, params})的方式跳转
    动态匹配路由
    型如:/index/:id?,通过this.$route.params.id获取,?表示id参数可传可不传

    六: 路由懒加载


    1.png
    2.png

    相关文章

      网友评论

          本文标题:vue-router

          本文链接:https://www.haomeiwen.com/subject/ugwhjftx.html