zoukankan      html  css  js  c++  java
  • Vue 路由配置、动态路由

    1.安装

    npm install vue-router --save / cnpm install vue-router --save


    2、引入并 Vue.use(VueRouter) (main.js)

    import VueRouter from 'vue-router'

    Vue.use(VueRouter)


    3、配置路由

    1、创建组件 引入组件

    2、定义路由 (建议复制)

    const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
    { path: '*', redirect: '/home' } /*默认跳转路由*/
    ]

    3、实例化VueRouter

    const router = new VueRouter({
    routes // (缩写)相当于 routes: routes
    })

    4、挂载


    new Vue({
    el: '#app',
    router,
    render: h => h(App)
    })



    5 、根组件的模板里面放上这句话 <router-view></router-view>

     


    6、路由跳转
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>

    注:路由可以单独封装js文件应用

    路由传值

       1.动态路由

          界面:<ul><li v-for="inte,key in list1"> <router-link :to="'/luyou2/'+key">{{inte.title}}---{{key}}</router-link></li></ul>

          配置:{ path: '/luyou2/:aid', component: luyou2 },

          接收:mounted(){console.log(this.$route.params);}

       2.get传值

          界面:<li v-for="inte,key in list"> <router-link :to="'/luyou1?id='+key">{{inte}}</router-link></li>

          配置:{ path: '/luyou1', component: luyou1 },

          接收:mounted(){console.log(this.$route.query);}

  • 相关阅读:
    java的异常抛出和String类常用方法
    监控工具zabbix
    监控工具nagios
    监控工具cacti
    LB集群
    高可用集群(HA)配置
    vsftp虚拟用户登录配置详解
    Ubuntu中设置静态IP和DNS(转载)
    虚拟机克隆linux系统后需要做的网络设置
    CentOS 6.8编译安装httpd2.2.31+MySQL5.6.31+PHP5.3.27
  • 原文地址:https://www.cnblogs.com/1711643472qq/p/9153766.html
Copyright © 2011-2022 走看看