学习网址:https://segmentfault.com/blog/vueroad

转载至:https://segmentfault.com/a/1190000009350679#articleHeader5

前言

vue.js除了拥有组件开发体系之外,还有自己的路由vue-router。在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接。使用vue-router后,我们可以自己定义组件路由之间的跳转,还可以设置稍复杂的嵌套路由,创建真正的spa(单页面应用)。我之前用vue-cli脚手架写了一个简单的人员管理实例,现在我们不用脚手架,就用原生的vue来写,本文也主要是通过实例来讲解vue.js+vue-router相关知识。

简单路由跳转实例

1.起步

下载vue-router.js,新建项目文件夹命名为router,将下载的vue-router.js放在router/js/路径下。新建index.html作为主页,引入样式文件,引入两个关键的js,vue和vue-router,再在body标签底部引入一个main.js用来写vue实例及配置路由,注意引用顺序。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<template></template> //组件区域
<script src="js/main.js"></script>
</body>
</html>

2.定义路由视图

调用foot-nav组件,将底部导航组件引入在这里,是因为两个路由页面都要用到它

<div id="app">
<router-view></router-view>
<foot-nav></foot-nav>
</div>

知识点::<router-view>

<router-view>标签相当于一个插槽,用于将匹配到的组件渲染出来,一个个路由定义的组件相当于卡,跳转某个路由时,该路由下的页面就插在这个插槽中渲染显示。
一个组件可以有多个<router-view>视图,并用name值去区分它们,这种多用在网页布局方面,如上左主结构,这个时候就可以定义三个<router-view>
示例

<div id="app">
<router-view name="top"></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div> <script>
var topCom = Vue.extend({
template: '<div>顶部</div>'
}) var leftCom = Vue.extend({
template: '<div>侧边栏</div>'
}) var mainCom = Vue.extend({
template: '<div>主页</div>'
}) var router = new VueRouter({
routes:[
{
path: '/',
name: 'home',
components:{
top: topCom,
left: leftCom,
main: mainCom
}
}
]
}) var app = new Vue({
el: '#app',
router
})
</script>

再为各个板块设置一下样式,打开浏览器查看效果

https://segmentfault.com/img/remote/1460000009350682?w=1006&h=617

3.子组件(底部导航)

3.1 创建子组件

人员管理系统分为两个模块,一个首页,一个管理页,两个页面都需引入一个公共组件:底部导航。在首页index.html中加入以下模板

<template id="footer">
<div class="footer fixed">
<ul>
<li><router-link to="/">首页</router-link></li>
<li><router-link :to="{name:'manage',params:{id:1}}">人员管理</router-link></li>
</ul>
</div>
</template>

知识点::<router-link>

<router-link>标签主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径(我们等会得配置路径为'/'和'/manage'的路由)
router-link除了可以跳转链接之外,还可以传参,可以传多个参数,一般格式为

<router-link to="路由路径"></router-link>
<router-link :to="{ path:路由路径}"></router-link>
<router-link :to="{name:'路由命名',params:{参数名:参数值,参数名:参数值}}"></router-link>

知识点:this.$router.push

如果不想用<router-link>标签,也可以给需要跳转的地方添加一个点击事件,在事件里写this.$router.push方法

this.$router.push('路由路径')
this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})

3.2 注册子组件

在main.js中全局注册子组件并且定义vue实例

Vue.component('foot-nav',{
template: '#footer'
}) var app = new Vue({
el: '#app'
})

4.首页及管理页组件

4.1 创建首页及管理页

<template id="index">
<div>
首页
</div>
</template>
<template id="manage">
<div>
人员管理
<p>id:{{id}}</p>
</div>
</template>

4.2 注册主页及管理页

var Home = Vue.extend({
template: '#index'
}) var Manage = Vue.extend({
template: '#manage',
data(){
return{
id: ''
}
},
mounted:function(){
this.id = this.$route.params.id
}

知识点:this.$route.params

this.$route指向vue实例的路由,params是路由传过来的参数集合

5.定义路由

定义路由router,并引进vue实例中

var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'/manage/:id',
name: 'manage',
component:Manage
}
]
}) var app = new Vue({
el: '#app',
router
})

知识点:path:'/路径/:参数名'

一个路由要传参时,需在path路径后面添加一个‘/’并加上冒号和参数名

知识点:路由激活class

vue-router当路由处于激活状态时,会有一个class类“router-link-exact-active”,我们只需为这个类添加样式就可以实现路由激活状态下的样式编写
接下来去浏览器查看路由跳转效果

https://image-static.segmentfault.com/245/317/2453176964-5912b0454d842_articlex

    

前言

vue.js除了拥有组件开发体系之外,还有自己的路由vue-router。在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接。使用vue-router后,我们可以自己定义组件路由之间的跳转,还可以设置稍复杂的嵌套路由,创建真正的spa(单页面应用)。我之前用vue-cli脚手架写了一个简单的人员管理实例,现在我们不用脚手架,就用原生的vue来写,本文也主要是通过实例来讲解vue.js+vue-router相关知识。

简单路由跳转实例

1.起步

下载vue-router.js,新建项目文件夹命名为router,将下载的vue-router.js放在router/js/路径下。新建index.html作为主页,引入样式文件,引入两个关键的js,vue和vue-router,再在body标签底部引入一个main.js用来写vue实例及配置路由,注意引用顺序。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<template></template> //组件区域
<script src="js/main.js"></script>
</body>
</html>

2.定义路由视图

调用foot-nav组件,将底部导航组件引入在这里,是因为两个路由页面都要用到它

<div id="app">
<router-view></router-view>
<foot-nav></foot-nav>
</div>

知识点::<router-view>

<router-view>标签相当于一个插槽,用于将匹配到的组件渲染出来,一个个路由定义的组件相当于卡,跳转某个路由时,该路由下的页面就插在这个插槽中渲染显示。
一个组件可以有多个<router-view>视图,并用name值去区分它们,这种多用在网页布局方面,如上左主结构,这个时候就可以定义三个<router-view>
示例

<div id="app">
<router-view name="top"></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div> <script>
var topCom = Vue.extend({
template: '<div>顶部</div>'
}) var leftCom = Vue.extend({
template: '<div>侧边栏</div>'
}) var mainCom = Vue.extend({
template: '<div>主页</div>'
}) var router = new VueRouter({
routes:[
{
path: '/',
name: 'home',
components:{
top: topCom,
left: leftCom,
main: mainCom
}
}
]
}) var app = new Vue({
el: '#app',
router
})
</script>

再为各个板块设置一下样式,打开浏览器查看效果

https://segmentfault.com/img/remote/1460000009350682?w=1006&h=617

3.子组件(底部导航)

3.1 创建子组件

人员管理系统分为两个模块,一个首页,一个管理页,两个页面都需引入一个公共组件:底部导航。在首页index.html中加入以下模板

<template id="footer">
<div class="footer fixed">
<ul>
<li><router-link to="/">首页</router-link></li>
<li><router-link :to="{name:'manage',params:{id:1}}">人员管理</router-link></li>
</ul>
</div>
</template>

知识点::<router-link>

<router-link>标签主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径(我们等会得配置路径为'/'和'/manage'的路由)
router-link除了可以跳转链接之外,还可以传参,可以传多个参数,一般格式为

<router-link to="路由路径"></router-link>
<router-link :to="{ path:路由路径}"></router-link>
<router-link :to="{name:'路由命名',params:{参数名:参数值,参数名:参数值}}"></router-link>

知识点:this.$router.push

如果不想用<router-link>标签,也可以给需要跳转的地方添加一个点击事件,在事件里写this.$router.push方法

this.$router.push('路由路径')
this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})

3.2 注册子组件

在main.js中全局注册子组件并且定义vue实例

Vue.component('foot-nav',{
template: '#footer'
}) var app = new Vue({
el: '#app'
})

4.首页及管理页组件

4.1 创建首页及管理页

<template id="index">
<div>
首页
</div>
</template>
<template id="manage">
<div>
人员管理
<p>id:{{id}}</p>
</div>
</template>

4.2 注册主页及管理页

var Home = Vue.extend({
template: '#index'
}) var Manage = Vue.extend({
template: '#manage',
data(){
return{
id: ''
}
},
mounted:function(){
this.id = this.$route.params.id
}

知识点:this.$route.params

this.$route指向vue实例的路由,params是路由传过来的参数集合

5.定义路由

定义路由router,并引进vue实例中

var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'/manage/:id',
name: 'manage',
component:Manage
}
]
}) var app = new Vue({
el: '#app',
router
})

知识点:path:'/路径/:参数名'

一个路由要传参时,需在path路径后面添加一个‘/’并加上冒号和参数名

知识点:路由激活class

vue-router当路由处于激活状态时,会有一个class类“router-link-exact-active”,我们只需为这个类添加样式就可以实现路由激活状态下的样式编写
接下来去浏览器查看路由跳转效果

https://image-static.segmentfault.com/245/317/2453176964-5912b0454d842_articlex

6.嵌套路由

有时我们项目由多层嵌套组件组成,这个时候就需要用到嵌套路由
先看下图例子,我们给manage路由再添加两个子路由

https://segmentfault.com/img/remote/1460000009350684?w=443&h=497

6.1 在组件内部添加<router-view>

<template id="manage">
<div>
人员管理
<ul>
<li><router-link to="/manage/list">人员列表</router-link></li>
<li><router-link to="/manage/edit">编辑</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>

6.2 定义子路由

//构建组件
var List = Vue.extend({
template: '<div>人员列表</div>'
}) var Edit = Vue.extend({
template: '<div>编辑</div>'
}) var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'/manage',
name: 'manage',
component:Manage,
//子路由由children表示
children:[
{
path:'list',
name: 'list',
component:List
},
{
path:'edit',
name: 'edit',
component:Edit
}
]
}
]
})

7.路由重定向

未设置路由重定向时,当我们随意输入一个路径,会显示一片空白或404。为了防止这种现象发生,我们一般在配置路由时再定义一个重定向路由

var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'*',
redirect: '/'
},
]
})

打开浏览器,随意输入一个未定义的路由查看效果
https://segmentfault.com/img/remote/1460000009350685?w=443&h=632

vue.js路由vue-router的更多相关文章

  1. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  2. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  3. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  4. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  5. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  6. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  7. Vue.js路由

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  8. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  9. vue.js路由嵌套

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

随机推荐

  1. k8s的Deployment 滚动升级

    首先定义一个Deployment,并创建它 apiVersion: apps/v1beta1 kind: Deployment metadata: name: house-live spec: rep ...

  2. JS实现简单的运行代码 & 侧边广告

    /* JS实现简单的运行代码功能 */<!doctype html> <html> <head> <meta charset="utf-8" ...

  3. C++ MFC Tab Control控件的详细使用

    1. 新建一个MFC工程, 取名MyTab, 选择Dialog based, 然后Finish. 2. 删除对话框上默认添加的三个控件. 添加Tab Control控件并在Property属性中设置I ...

  4. 解决在.NET 4.0下无法发送包含尖括号等请求的问题

    今天在做一个简单的数据添加时,使用jQuery的ajax的post操作,发现如果包含尖括号等html格式数据的请求无法发给服务端. 以往的做法就是在页面中或web.config中的pages节点中增加 ...

  5. Swift中的的注释

    1. Swift支持与OC中相同的     /**/  ./***/  不同点Swift支持 /*/**/ 这样的注释  ,多行注释 2. 直接双杠注释 // 单行注释 3. 利用 //MARK: 返 ...

  6. python错题整理

    1.列表list去重 l1 = [1,1,2,3,5,5,4,4,4,5,6] set1 = set(l1) # print(set1) # set是集合 l2 = list(set1) # 将集合转 ...

  7. php zip扩展的一些基本操作

    public function zip_test() { $zip_obj = new ZipArchive(); $res = $zip_obj->open('/data1/www/www.k ...

  8. Codeforces Round #499 (Div. 2) D. Rocket题解

    题目: http://codeforces.com/contest/1011/problem/D This is an interactive problem. Natasha is going to ...

  9. 重启虚拟机后,再次重启nginx会报错:[emerg] open() "/var/run/nginx/nginx.pid" failed (2: No such file or directory)

    问题: 重启虚拟机后,再次重启nginx会报错: open() "/var/run/nginx/nginx.pid" failed (2: No such file or dire ...

  10. 设计table表格,用js设计偶数行和奇数行显示不同的颜色

    第一种:鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色 <!DOCTYPE html> <html> <head> <meta charset=&q ...