Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件。它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌。

基本概念:

路由:是一种映射关系,是 “path =>组件”的映射

路由器:管理路由的,在路由器里配置路由

1、npm 安装

npm install vue-router

2、相关API说明

(1)路由配置 :route是一条路由的实现,  它是一个对象,由两个部分组成: path和component. 或path和redirect。 path 指路径,component 指的是组件。多个route组成一个routes。

routes:[

{//一般路由

path:'/about',

component:About //组件

},

{//自动跳转路由

path:'/',

redirect:'/about'

}

]

(2)VueRouter():用于创建路由器的构造函数,接受routes参数

new Router({

//多个配置项
routes // routes: routes 的简写
})

(3)注册路由器:把router 实例注入到 vue 根实例中

import router from "./router"; //先引入路由

new Vue({
router,
...
})

(4)使用路由组件标签

①<router-link>:用来生成路由链接

<router-link to="./xxx">go to xxx</router-link>

②<router-view>:用来显示当前路由组件界面,匹配了哪个组件就会显示哪个组件的界面

<router-view></router-view>

执行过程:当用户点击 router-link 标签时,会去寻找它的 to 属性, 它的 to 属性和router/index.js 中配置的路径{ path: '/home', component: Home}  path 一一对应,从而找到了匹配的组件, 最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现是基于hash 实现的。

3、简单使用

一:基本路由

基本目录结构:

注意:组件包括两种,路由组件和非路由组件,非路由组件放在components文件夹中,路由组件放在另一个文件夹中,通常命名为views或者pages

(1)定义路由器模块 router/index.js

/*
路由器模块
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入路由组件
import About from '../views/About.vue'
import Home from '../views/Home.vue' Vue.use(VueRouter) export default new VueRouter({//向外暴露一个路由器
//n个路由
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
},
{//当请求根路径时,重定向请求home
path:'/',
redirect:'/home'
}
]
})

(2)在入口的main.js中引入路由器,并进行配置

import Vue from 'vue'
import App from './App'
import router from './router' //index可以省略不写,引入路由器 new Vue({//配置对象的属性名都是一些默认的属性名,不能随便修改
el:'#app',
components:{
App
},
template:'<App/>',
router
})

(3)App.vue中使用路由组件标签 <router-link>和<router-view>

<template>
<div class="container">
<div class="row">
<div class="col-xs-offset-2 cool-xs-8">
<div class="page-header"><h2>Router Basic - 01 </h2></div>
</div>
</div> <div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<router-link to="/home" class="list-group-item">Home</router-link>
<router-link to="/about" class="list-group-item">About</router-link>

</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<router-view></router-view>
</div>
</div>
</div>
</div>
</div> </template> <script> export default{ }
</script> <style>
.container{
width:1000px;
margin:0 auto;
}
.router-link-active{
color:red !important;
}
</style>

(4)编辑路由组件的内容

Home.vue

<template>
<div>
Home
</div>
</template> <script>
export default{ }
</script> <style> </style>

About.vue

<template>
<div>
About
</div>
</template> <script>
export default{ }
</script> <style> </style>

最终呈现结果:

二:嵌套路由:点击一个路由之后,打开的页面中仍然存在路由

效果图:

(1)修改路由器模块( router/index.js)中的routes配置

/*
路由器模块
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入路由组件
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import Message from
'../views/Message.vue'
import News from
'../views/News.vue' Vue.use(VueRouter) export default new VueRouter({//向外暴露一个路由器
//n个路由
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:
'/home/message', //path最左侧的斜杠永远代表根路径
component:Message
},
{
path:'/home/news',
component:News
},
{
path:'/home',
redirect:'/home/news'

}
]

},
{//当请求根路径时,重定向请求home
path:'/',
redirect:'/home'
}
]
})

(2)Home组件中,使用路由组件标签 <router-link>和<router-view>

<template>
<div style="margin-left:10px;">
<h2>Home 组件</h2>
<div>
<ul class="nav nav-tabs">
<li><router-link to="/home/news">News</router-link></li>
<li><router-link to="/home/message">Message</router-link></li>
</ul>
<div>
<router-view></router-view>
<hr>
</div> </div>
</div>
</template> <script>
export default{ }
</script> <style> </style>

(3)编辑新增的News和Message路由组件的内容

News.vue

<template>
<div>
<ul>
<li v-for="(news,index) in newsArr" :key="index">
{{news}}
</li>
</ul> </div>
</template> <script>
export default{
data(){
return {
newsArr:['news1','news2','news3']
}
}
}
</script> <style> </style>

Message.vue

<template>

    <ul>
<li v-for="(message,index) in messages" :key="message.id">
<a href="">{{message.title}}</a>
</li>
</ul> </template> <script>
export default{
data(){
return {
messages:[]
}
},
mounted(){
var that = this;
//模拟ajax请求从后台请求数据
setTimeout(()=>{
const messages = [
{id:1,title:'message1'},
{id:2,title:'message2'}
]
that.messages = messages;
},1000)
}
}
</script> <style> </style>

Vue Router的入门以及简单使用的更多相关文章

  1. vue router拦截器的简单使用

    之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过 ...

  2. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  3. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  4. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  5. vue router 几种方式对比 (转载)

    <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导 ...

  6. 04慕课网《vue.js2.5入门》——Vue-cli开发todolist

    主要文件目录: 文件代码: 根实例,初始化vue: <!--index.html,网站入口页面,和main.jsp组成一套.vue文件,包含--> <!DOCTYPE html> ...

  7. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

  8. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  9. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

随机推荐

  1. mysql基础用法

    <1>内置函数: locate('aa', '字段名');查询aa在字段中是否存在,返回1或0 replace('字段名','需替换的字符','替换后的字符') <2>函数: ...

  2. 从ASP.NET的web1子界面刷新打开web1的web0父界面

    单击web0界面的按钮bt1触发一下代码: protected void btnSave_Click(object sender, EventArgs e) { string parentJs = @ ...

  3. SQL SERVER表不能修改表结构的处理方法

    SQL SERVER表提示不能修改表结构,这究竟是什么原因呢?下面就为您介绍处理该问题的方法,如果您在SQL SERVER表修改方面遇到过问题,不妨一看. 新装的SQL SERVER 2008,打开原 ...

  4. button的后台点击事件

    在html元素加上runat,type就可以使用onserverclick创建后台事件<button runat='server' onserverclick='Btn_Click' type= ...

  5. 解决当FORM的ENCTYPE=&quot;multipart/form-data&quot; 时request.getParameter()获取不到值的方法

    部分转载于: http://blog.csdn.net/georgejin/article/details/1706647 http://www.cnblogs.com/loveyunk/p/6089 ...

  6. LaTeX文章结构

    %导言 %\documentclass{article} %ctexbook \documentclass{ctexbook} \title{\heiti 监督学习} % 黑体 \author{\ka ...

  7. spring boot2.03 spring cloud Finchley.RELEASE遇到的问题

    1.spring cloud bus 本地不能更新 原因是@RefreshScope注解要加在需要更新的controller上 2.No instances found of configserver ...

  8. 最简单的php学习

    php文件操作函数 filetype()判断文件的基本类型 egg 目录文件  文件  等  dir文件夹 file 文件 stat()函数获得指定文件名参数目标文件的基本属性 在php中以is_开头 ...

  9. 斜杠反斜杠,去空格\xa0,连接函数join()

    1斜杠反斜杠 斜杠:/.反斜杠:\. 反斜杠\,在windows系统中用来表示目录. 而在unix系统中,/表示目录.由于web遵循unix命名,所以在网址(URL)中,/表示目录. 在unix系统中 ...

  10. OOD沉思录 --- 面向动作与面向对象 --- 避免泛滥成灾的类

    3.7 从设计中取出不需要的类 只有Get/Set方法的类不算是一个必要的类,Get/Set方法也不算是有意义的行为.这种类降级为属性更加合适. 3.8 去除系统外部的类 如果一个类只调用系统领域的方 ...