vue路由1.0_Vue.js 路由详解（一）

1. Vue.js 路由的作用

用 Vue.js + vue-router 创建单页应用，是非常简单的。

使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

简单的理解路由

将浏览器地址栏的url信息进行有规律的解析并渲染对应的视图！

官方文档

https://router.vuejs.org/zh-cn/installation.html

下载地址

https://unpkg.com/vue-router/dist/vue-router.js

在 Vue 后面引入js文件

路由应用演示

上图示例代码

Vue 演示样例

*{padding:0px; margin:0px;}

body{background:#F4F5F6;}

a{text-decoration:none; color:#000;}

#app{width:980px; margin:0 auto; margin-top:80px}

#app-left{width:180px; float:left;}

#app-left a{display:block; width:100%; height:50px; line-height:50px; text-align:center;}

#app-right{width:730px; float:right; background:#FFFFFF; padding:20px;}

网站首页

关于我们

//1 定义模板

const Home = { template: '

home

home...

' };

const About = { template: '

about

about...

' };

//2 定义路由

const router = new VueRouter({

routes : [

{ path: '/', component : Home },

{ path: '/home', component : Home },

{ path: '/about', component : About }

]

})

//3 实例化vue组件并使用路由

var app = new Vue({

router

}).$mount('#app');

2. 导航动态激活效果，注意：router-link会阻止click事件，在 router-link 只能用 @click.native="" 的方式添加事件。

代码

Vue 演示样例

*{padding:0px; margin:0px;}

body{background:#F4F5F6;}

a{text-decoration:none; color:#000;}

#app{width:980px; margin:0 auto; margin-top:80px}

#app-left{width:180px; float:left;}

#app-left a{display:block; width:100%; height:50px; line-height:50px; text-align:center;}

#app-right{width:730px; float:right; background:#FFFFFF; padding:20px;}

.active{color:#007AFF !important;}

网站首页

关于我们

//1 定义模板

const Home = { template: '

home

home...

' };

const About = { template: '

about

about...

' };

//2 定义路由

const router = new VueRouter({

routes : [

{ path: '/', component : Home },

{ path: '/home', component : Home },

{ path: '/about', component : About }

]

})

//3 实例化vue组件并使用路由

var app = new Vue({

router,

data : {

index : 1

},

methods :{

changeIndex : function(index){

this.index = index;

}

}

}).$mount('#app');

3. 动态绑定路由关于我们

......

var app = new Vue({

router,

data:{

about : 'about'

}

}).$mount('#app');

4.嵌套路由 children

实际项目的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

网站首页

关于

//1 定义模板

const Home = { template: '

home

home...

' };

const About = {template: '

关于hcoder | 关于HUI

'};

const Hc = {template: '

hcoder

hcoder....

'};

const Hui = {template: '

hui

hui....

'};

//2 定义路由

const router = new VueRouter({

routes : [

//首页空白重定向到 /home

{ path: '/', redirect : '/home' },

{ path: '/home', component : Home },

{

path: '/about',

component : About,

children : [

{

path: 'hc',

component: Hc

},

{

path: 'hui',

component: Hui

}

]

},

]

});

//3 实例化vue组件并使用路由

var app = new Vue({

router

}).$mount('#app');

4.动态路由匹配-参数解析

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如：

//1 定义模板

const Home = { template: '

home

home...

' };

const About = { template: '

about

about...{{ $route.params.id }} - {{ $route.params.name }}

' };

//2 定义路由

const router = new VueRouter({

routes : [

//首页空白重定向到 /home

{ path: '/', redirect : '/home' },

{ path: '/home', component : Home },

{ path: '/about/:id/:name', component : About }

]

})

//3 实例化vue组件并使用路由

var app = new Vue({router}).$mount('#app');

5. 命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。const router = new VueRouter({

routes: [

{

path: '/user/:userId',

name: 'user',

component: User

}

]

})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象(注意 to 前面的 :)：User

示例dom:

网站首页

js

const router = new VueRouter({

routes :[

{ path: '/home', name : 'home', component : Home }

]

});