前言

具体实现

编写路由的3步1. 定义路由组件    2. 映射路由3. 编写路由2个标签

index.js：路由器对象模块

import Vue from "vue"
import VueRouter from "vue-router"
import About from "../views/About"
import Home from "../views/Home"
import News from "../views/News"
import Messages from "../views/Messages"
import MessageDetail from "../views/MessageDetail"
// 声明使用vue-router插件
/*
内部定义并注册了2个组件标签(router-link/router-view),
给组件对象添加了2个属性:1. $router: 路由器2. $route: 当前路由*/
Vue.use(VueRouter);
export default new VueRouter({routes: [ // 注册应用中所有的路由 将path与路由组件对应{ //一般路由path: "/about",  // path的最左侧 / 为根路径component: About,children:[  //嵌套路由（子路由）{path: "news",  //同 “/about/news”component: News},{path: "messages",component: Messages,children:[ //二次嵌套路由{path:"/about/messages/detail/:id", //占位语法 params参数 组件可通过 对象.$route.params.id取出component:MessageDetail}]},{path:"/About",redirect: "/About/news"  //默认显示}]},{path: "/home",component:Home},{  // 自动跳转路由path: "/", redirect:"/home"}]
});

main.js：入口JS

import Vue from "vue"
import App from "./App"
import router from "./router"  //引入路由器，由于是index.js写到这里文件夹就行
new Vue({el: "#app",components: {App},  // 映射组件标签template: "<App/>",  // 指定需要渲染到页面的模板router  // 注册路由器   故任务路由组件对象都有属性$router  $route
});

App.vue

<div class="list-group"><!--生成路由链接--><router-link to="/about" class="list-group-item" >About</router-link><router-link to="/home" class="list-group-item">Home</router-link>
</div>
。。。
<keep-alive>  <!--缓存路由组件：适用低实时性要求--><router-view msg="abc"></router-view>  <!--本页的路由触发-->
</keep-alive>

PS：当组件被选中后，router-link会多出风格类名class=“router-link-exact-active router-link-active”，可认为给该修饰类增加style

.router-link-active{color:red;
}

Messages.vue

<template><div><ul><li v-for="(item,index) in messagesArr" :key="item.id"><router-link :to="`/about/messages/detail/${item.id}`"> {{item.title}}</router-link>  <!--:to的右侧“”里被:强制绑定为变量（用JS语法--><button @click="push(item.id)">push查看</button><button @click="replace(item.id)">replace查看</button></li></ul><hr><router-view></router-view><button @click="$router.back()">回退</button> <!--弹出栈顶地址并访问--></div>
</template>
。。。methods:{push(id) {this.$router.push(`/about/messages/detail/${id}`); //访问该地址并压进栈},replace(id) {this.$router.replace(`/about/messages/detail/${id}`); //访问该地址并替换栈顶地址}}

向路由组件传递数据params:<router-link :to="`/about/messages/detail/${item.id}`"></router-link>props: <router-view msg='abc'>  //别的路由组件需用props接收为自身属性再使用，类似组件间props方式通信

MessageDetail.vue

watch:{$route:function (value) {const id = value.params.id;//.find是返回符合要求的第一个数组元素  .filter返回的是数组this.messageDetail =this.allMessagesDetails.find(detail =>detail.id===id);}}

【Vue】路由器插件——vue-router相关推荐

安装vue浏览器插件-Vue.js devtools
一.进入github仓库:https://github.com/vuejs/devtools 可以下载zip包,也可以clone仓库.这里我下载的压缩包. 二.解压后,在终端进入文件夹路径. 解压后推 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
vue 在浏览器控制台怎么调试谷歌插件vue Devtools
vue 在浏览器控制台怎么调试谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
Vue.js服务器端渲染与Vue路由器：分步指南
当我开始使用Vue收集有关SSR(服务器端渲染)的信息时,我必须从不同的文章以及官方文档中获取相关信息,以便全面了解这个主题. 以下是我在这些来源中发现的一些问题: 很多关于你应该拥有的信息的假设,比 ...
vue 路由重定向_使用Vue和Vue路由器进行高级路由：重定向和Nav Guard
vue 路由重定向 While the basics of routing in Vue.js have already been covered, today we'll explore some ...
Vue学习之路由(Router)
Vue学习之路由(Router) 文章目录 Vue学习之路由(Router) 一.路由是什么? 二.Vue Router的安装 1.直接下载/CDN 2.NPM安装三.路由的基础使用 1.定义路 ...
vue之插件 (Plugins)
Vue插件 vue 通常我们向Vue全局添加一些功能时,会采用插件的模式,它有两种编写方式对象类型:一个对象,但是必须包含一个 install 的函数,该函数会在安装插件时执行: 函数类型:一个fu ...
实用VUE 开发插件！！前端必备
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
[vue] 怎么在vue中使用插件？
[vue] 怎么在vue中使用插件? npm 安装然后再main.js 引入最后 vue.use(插件名) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...

【Vue】路由器插件——vue-router

文章目录

前言

具体实现

index.js：路由器对象模块

main.js：入口JS

App.vue

Messages.vue

MessageDetail.vue

【Vue】路由器插件——vue-router相关推荐

最新文章

热门文章