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

  • 相关阅读:
    if语法案例
    其他6-break,continue,exit,return区别
    其他5-6种产生随机数的方法
    其他4-shell脚本后台运行知识
    算法练习 第三周
    回顾MySQL基础
    jsp中使用jQuery获取窗口高度不正确的问题
    初学java 学生管理系统——v04版本 改用web
    web项目中跳转路径的使用
    tomcat部署项目的方式
  • 原文地址:https://www.cnblogs.com/1711643472qq/p/9153766.html
Copyright © 2011-2022 走看看