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

Vue 路由配置、动态路由的更多相关文章

  1. Nuxt配置动态路由以及参数校验

    动态路由就是带参数的路由.比如我们商品列表里很多商品详细页,这时候就需要动态路由的帮助了. 比如我们新建一个commodity文件夹,新建一个index.vue 文件,然后新建一个_id.vue (以 ...

  2. vue根据后端菜单自动生成路由(动态路由)

    vue根据后端菜单自动生成路由(动态路由) router.js import Vue from 'vue' import Router from 'vue-router' import store f ...

  3. 网络工程实训_4RIP路由(动态路由)

    实验4:RIP路由.包括RIPv1:RIPv2 动态路由协议包括距离向量路由协议和链路状态路由协议.RIP(Routing Information Protocol,路由信息协议)是使用最广泛的距离向 ...

  4. CCNA - Part12 - 路由协议 (1) - 静态路由,动态路由 RIP

    路由器 在之前关于路由器的介绍中,我们知道它是网络互联的核心设备,用于连接不同的网络,在网络之间转发 IP 数据报.对于路由器来说,路由表是其内部最为重要的构成组件.当路由器需要转发数据时,就会按照路 ...

  5. nodejs之express路由与动态路由

    1.快速创建express项目步骤 /** * 1.cd 到项目里面 * 2.npm init --yes 创建package.json文件 * 3.安装express * npm install e ...

  6. vue+iview实现动态路由和权限验证

    github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Gith ...

  7. Angular配置路由以及动态路由取值传值跳转

    Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...

  8. 使用Gateway配置路由以及动态路由

    1. 新建module cloud-gateway-gateway9527 2. pom.xml <!--注意不需要web模块依赖,否则报错--> <?xml version=&qu ...

  9. Reactjs之静态路由、动态路由以及Get传值以及获取

    1.新增知识点 /* react路由的配置: 1.找到官方文档 https://reacttraining.com/react-router/web/example/basic 2.安装 cnpm i ...

  10. IP路由__动态路由

    1.使用协议来查找网络并更新路由表的配置,就是动态路由.它比使用静态或默认路由方便,但它需要一定的路由器CPU处理时间和网络链接带宽.路由协议定义了路由器与相邻路由器通信时所使用的一组规则. 在互联网 ...

随机推荐

  1. 等比例缩放图片(C#)

    private Bitmap ZoomImage(Bitmap bitmap, int destHeight, int destWidth) { try { System.Drawing.Image  ...

  2. [ML] 解决样本类别分布不均衡的问题

    转自:3.4 解决样本类别分布不均衡的问题 | 数据常青藤 (组织排版上稍有修改) 3.4 解决样本类别分布不均衡的问题 说明:本文是<Python数据分析与数据化运营>中的“3.4 解决 ...

  3. Python中的import

    模块(module):用来从逻辑(实现一个功能)上组织Python代码(变量.函数.类),本质就是*.py文件.文件是物理上组织方式"module_name.py",模块是逻辑上组 ...

  4. STM32 RTC时钟的配置

    1) 使能电源时钟和备份区域时钟. RCC_APB1PeriphClockCmd(RCC_APB1Periph_PWR | RCC_APB1Periph_BKP, ENABLE); //使能电源时钟和 ...

  5. [LeetCode&Python] Problem 566. Reshape the Matrix

    In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...

  6. 一定要记住这20种PS技术,让你的照片美的不行! - imsoft.cnblogs

    照片名称:调出照片柔和的蓝黄色-简单方法, 1.打开原图素材,按Ctrl + J把背景图层复制一层,点通道面板,选择蓝色通道,图像 > 应用图像,图层为背景,混合为正片叠底,不透明度50%,反相 ...

  7. php-fpm配置及操作

    启动与停止 启动 /usr/local/php/sbin/php-fpm 停止 pkill php-fpm

  8. HDU 1233:还是畅通工程(最小生成树)

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  9. C4D 计算体积和表面积插件

    前段时间,由于有个模型要做3D打印,所以需要知道模型的体积以及表面积,以便计算价格. 我用的是C4D,恕我愚昧,在C4D上没找到自带的. 在网上找了好久,才找到一个由法国开发名为aire_volume ...

  10. dbt macro 说明

    macro是SQL的片段,可以像模型中的函数一样调用.macro可以在模型之间重复使用SQL,以符合DRY(不要重复自己)的工程原理. 此外,共享包可以公开您可以在自己的dbt项目中使用的macro. ...