vue-router集成

  1. 安装vue-router
    npm install vue-router --save

    1. App.vue中书写跳转链接

    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>


    <router-view></router-view>

    1. main.js中集成vue-router并配置路由规则

    // 1. 导入vue-router
    import vueRouter from 'vue-router';
    // 2. 将vueRouter对象绑定到Vue对象上
    Vue.use(vueRouter);

    // 3. 导入路由规则对应的组件对象
    import login from './components/account/login.vue';
    import register from './components/account/register.vue';

    // 4.定义路由规则
    var router1 = new vueRouter({
    routes:[
    {path:'/login',component:login},
    {path:'/register',component:register}
    ]
    });

    // 5. 利用Vue对象进行解析渲染
    new Vue({
    el:'#app',
    // 使用路由对象实例
    router:router1,
    render:c=>c(App)
    });

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue2中路由的写在项目的src/router/index.js 里 Home.vue'页面9宫格,用 <rout...
    悟空你又瘦了阅读 677评论 0 0
  • Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...
    _ihhu阅读 17,726评论 1 49
  • Vue-router学习指南 日记:本文按照vue-router官网的知识结合例子进行分析和讲解,搭建工具(vue...
    sunny519111阅读 1,491评论 0 6
  • 他翻身跃下的时候想必是觉得自由的吧越成熟,越学会尊重和不谴责真相仅存在于发生的那一刻,之后的所有努力与争辩都不过只...
    callme曹曹阅读 171评论 0 0
  • 01大吉大利,今晚吃鸡! 网络游戏《绝地求生:大逃杀》火爆了,吃鸡圣地、吃鸡网咖、一起吃鸡,一度成为热点词。 这款...
    追月城西阅读 417评论 0 2