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);}

  • 相关阅读:
    【转】StackExchange.Redis 事务控制和Batch批量操作
    mysql 修改时子查询的问题
    mysql 对于有null值的 NOT IN和NOT EXISTS
    【转】Core使用Redis做Session进程外储存
    Filter的注入方式 NET Core
    MiddleWare中间键实现 简单的防盗链 AOP
    c# Jenkins+PowerShell持续集成环境搭建
    VS2019下载离线安装包
    1226 六晴
    1225 五 晴
  • 原文地址:https://www.cnblogs.com/1711643472qq/p/9153766.html
Copyright © 2011-2022 走看看