Vue:路由router的一些用法

Vue-router的引入

分为两种方式:

1.通过npm 引入vue-router库

npm install vue-router

在模块中通过下面的方法使用

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘

Vue.use(VueRouter)

2.直接通过script标签引入vue-router.js文件

如果是通过script标签引入,则直接使用即可。

下载地址

router的使用

var routes = [
        {
            path:‘/home‘,
            component:home,
            name:"home"
        },
        {
            path:‘/order‘,
            component:order,
            name:"order",
            redirect:‘/order/all‘,  /*默认子路由*/
            children:[
                {
                    path:‘all‘,
                    component:all,
                    name:‘allOrder‘
                },
                {
                    path:‘having‘,
                    component:having,
                    name:‘havingOrder‘
                },
                {
                    path:‘had‘,
                    component:had,
                    name:‘hadOrder‘
                }
            ]
        },
        {path:‘/self‘,component:_self,name:"self"}
    ]

这里是我自己的一些应用心得。如果有什么问题,欢迎留言~

官方文档

原文地址:https://www.cnblogs.com/WQLong/p/8298291.html

时间: 2024-10-03 20:11:16

Vue:路由router的一些用法的相关文章

vue路由-router

VueRouter基础 vue路由的注册 导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> # 可以是下载之后的 <script src="vue.min.js"></script> <script src="vue-router.js"></script> 定义一个匹配规则对

vue 路由动态传参 (多个)

动态传参 传值页面  客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面  客户详情CustomerDetails.vue 通过this.$router.params来接收参数对象 打印结果: 原文地址:https://www.cnblogs.com/lpp-11-15/p/12092658.html

Vue页面跳转$router.push 的用法

vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .

vue路由请求 router

创建一个Router.js文件 // 路由请求//声明一个常量设置路菜单// import Vue from "vue/types/index";import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const First={template:'<div>菜单一</div>'}const Second={template:'<div>菜单二</div&g

vue路由

ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版.乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-web

14.vue路由&amp;脚手架

一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash", base:"基本路径" 加一些前缀 必须在history模式下有效 linkActiveClass:"active", 范围选择 linkExactActiveClass:"exact", 精确选择 routes:[ {path,componen

vue 路由知识点梳理及应用场景整理

最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚.现在重新看一遍文档,重新梳理一下. vue 路由的原理 说实话,路由我一直也就光顾着用,没认真思考过这个问题,还是那次人家面试问了这个,我才反应过来是应该好好的了解一下了. 无刷新跳转页面,是单页应用的一大优势,用户体验好,加载速度快,vue 路由的跳转就是无刷新的,它有两种形式,可以在定义路由的时候通过 mode 字段去配置,如果不配置这个字段,那么默认使用的就是 hash

vue路由跳转的方式

vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. this.$router.go(n) 一.不带参 1.1 router-link <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行,

详解vue 路由跳转四种方式 (带参数)

详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1. 不带参数  <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name /