美文网首页
Vue(8)-vue router

Vue(8)-vue router

作者: show_萧佩 | 来源:发表于2020-07-28 16:43 被阅读0次

    1.vue router

    1.下载安装 npm install vue-router

    2.创建路由表

    a.在router.js文件中引入需要的vue,vue router

    b.在实例化中使用vue router

    c.创建路由实例,明确路径和对应组件的关系对应的关系

    路由实例

    d.抛出路由实例(export default router)

    3.在main.js中注册路由

    注册路由

    4.在App.vue中使用router的组件

    <router-link>&<router-view>

    link后的to表示跳转路由

    App.vue

    5.最后效果,点击记账,标签,统计,会跳转到相应的目的路由

    6.404页面

    在我们做项目的时候,还要考虑输入路径出错的情况

    路由表添加一项

    在view里面补充一个404的视图

    实际效果如下图所示

    7.补充,路由传参

    1.传递参数:this.$router.push({name=“”,params:{list:'123' } })

    接受参数:this.$route.params.list

    2.传递参数:this.$router.push({name=“”,query:{list:'123' } })

    接受参数:this.$route.query.list

    相关文章

      网友评论

          本文标题:Vue(8)-vue router

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