vue路由

developerworks 发布于2019-08-26 13:50 / 2170人阅读

摘要：分类子组件中通过获取参数传参路由配置分类父组件中通过路由属性中的来确定匹配的路由，通过来传递参数。分类子组件中通过获取参数区别是把参数放在地址栏上，刷新不会消失，不会把参数放在地址上，刷新后消失

vue路由使用

1.安装vue路由

npm install vue-router

2.在src中新建router/index.js,引入vue路由

import Vue from "vue"
import VueRouter from "vue-router"//引入vue-router
Vue.use(VueRouter)

3.引入组件，并创建vue路由
*在这里，可以使用@进行引入，@相当于src目录

import Home from "../components/Home";
import header from "../components/Header";
import List from "@/components/List";//@相当于src目录
import footer from "../components/footer";
const routes=[
    {path:"/",component:Home},//默认页
    {path:"/header",component:header},
    {path:"/List",component:List},
    {path:"/footer",component:footer},
]
export default new VueRouter({
    routes: routes,
    mode:"history" //去掉地址栏的#号
  })

4.在main.js中引入router/index.js

import router from "@/router/index";

new Vue({
  el: "#app",
  router:router,
  components: { App },
  template: ""
})

5.路由跳转

首页

方法跳转,在methods中定义一个方法，通过事件执行

routerpush(){
            this.$router.push({ path: "/List" })//路由跳转
            // this.$router.go(1);//在 history 记录中向前或者后退多少步
            // this.$router.replace({ path: "/List" })//路由跳转,但不会向history中添加记录
        }

路由传参

1.params传参
路由配置

{path:"/List",
name:"分类",
components:List
},

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({ name:"分类",params:{id:33} })

子组件中通过this.$route.params.id获取参数
2.query传参
路由配置

{path:"/List",
name:"分类",
components:List
},

父组件中：通过路由属性中的name来确定匹配的路由，通过query来传递参数。

this.$router.push({ name:"分类",query:{id:33} })

子组件中通过this.$route.query.id获取参数

*区别：query是把参数放在地址栏上，刷新不会消失，params不会把参数放在地址上，刷新后消失

GPU云服务器云服务器 Vue_Vue Vue vue3 学习笔记 (五)——vue3 _vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109629.html

【Vue.js 牛刀小试】：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

摘要：而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。系列目录地址一、基础知识概览第一章 - 一些基础概念（posted at 2018-10-31）第二章 - 常见的指令的使用（posted at 2018-11-01）第三章 - 事件修饰符的使用（posted at 2018-11-02）第四章 - 页面元素样式的设定（posted a...

cpupro 2019-05-22 19:26 评论0 收藏0
服务端预渲染之Nuxt(路由篇)

摘要：前面既然说到了会把文件夹下面的所有文件编译成路由，那么子路由需要使用文件夹嵌套才行。客户端首次访问的页面会在服务端做输出，一旦渲染完成之后，则不会再在服务端输出，则会一直在客户端进行输出了。服务端预渲染之Nuxt - 使用现在大多数开发都是基于Vue或者React开发的，能够达到快速开发的效果，也有一些不足的地方,Nuxt能够在服务端做出渲染，然后让搜索引擎在爬取数据的时候能够读到...

yuanxin 2019-08-23 16:48 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

jhhfft 2019-08-02 11:56 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

frontoldman 2019-08-29 17:11 评论0 收藏0
使用 webpack 插件自动生成 vue 路由文件

摘要：从长远来看，使用插件自动生成路由是具有一定好处的。现在使用插件来自动生成路由后，就无需再关心和维护这些路由文件了。一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在项目中试点成功了，现在在项目中已经不需要再维护路由配置文件了，由插件自动生成，节省了大家维护路由的时间。从长远来看，使用插件自动生成路由是具有一定好处的。当项目中...

kviccn 2019-08-26 14:04 评论0 收藏0