• 首页 Home
  • 简介 About
  • 项目 Service
  • 案例 Cases
  • 新闻 News
  • 技术文章 本硕新闻 行业资讯

    [vue]router路由的使用

    发表时间:2019-04-19  热度:

    NPM安装

     

    npm install vue-router --save-dev

     

    使用

     

    //引入vue-router

    import VueRouter from 'vue-router';//路由

    Vue.use(VueRouter);

    //导入您的路由组件

    import UserCenter from '../UserCenter.vue';

    import login from '../login.vue';

    // 创建路由对象

    var router = new VueRouter({

      routes: [ // 配置路由规则

        {path:"/UserCenter",component:UserCenter,name:"UserCenter"},

        {path:"/login",component:login,name:"login"},

      ]

    })

    //使用路由

    <div id="app">

    <router-view></router-view>  //路由 router-view 区域 ,显示切换的组件内容

    <router-link to="/login">登录</router-link> //路由链接

    </div>

    //js代码

    var vm = new Vue({

      el: '#app',

      router, // 挂载路由对象到 VM 实例上

    })

     

    //编程式导航

    this.$router.push('/home/sort/UserCenter'+userid:id)

    this.$router.push({path: '/home/sort/UserCenter',query:{userid: 'abc'}})

    this.$router.push({name: 'UserCenter',params:{userid: 'abc'}})

     

     

    文章怎么样?
    相关资讯