Vue-router(路由)
2018-05-13 本文已影响0人
奶瓶SAMA
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。
它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。
一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。
取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。
由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。
基本使用
npm install vue-router
创建路由的简单案例演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1. 引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 400px;
margin: 100px auto;
}
#app a{
text-decoration: blink;
}
#app div{
width: 400px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div id="app">
<!--5. 路由导航 就是一个a连接,点击一个a链接,会跳转到指定的路径,也就是to的位置-->
<router-link to='/tab1'>tab1</router-link>
<router-link to='/tab2'>tab2</router-link>
<!--6. 路由组件渲染的入口-->
<router-view></router-view>
</div>
</body>
</html>
<script>
//2. 定义组件----使用构造器进行全局扩展,创建全局组件
//赋值操作,用一个变量名保存组件中所有的内容
var tab1Component = Vue.extend({
template: '<div>这是tab1 组件</div>'
})
var tab2Component = Vue.extend({
template: '<div>这是tab2 组件</div>'
})
//3. 使用路由接管组件的注册的组件,也就是说将路由(路径)和组件一一关联
// 点击一个路由(路径),显示一个组件
var vueRouter = new VueRouter({
routes: [
{path: '/',redirect: 'tab2'},
{path: '/tab1',component: tab1Component},
{path: '/tab2',component: tab2Component}
]
})
//4. 创建Vue对象,挂载路由,实现视图和路由的关联
new Vue({
router: vueRouter
}).$mount('#app')
</script>
路由的使用步骤
1.引入js文件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2.定义(注册)路由跳转的组件----使用全局扩展的方式,用其他创建组件的方式也可以 在这里,进行了一个赋值操作,用一个变量名保存组件中所有的内容
var tab1Component = Vue.extend({
template: '<div>这是tab1 组件</div>'
})
var tab2Component = Vue.extend({
template: '<div>这是tab2 组件</div>'
})
3.使用路由接管我们注册的组件.
var vueRouter = new VueRouter({
routes: [
{path: '/',redirect: 'tab2'},
{path: '/tab1',component: tab1Component},
{path: '/tab2',component: tab2Component}
]
})
4.创建router的实例并挂载根节点,将视图和路由进行关联
new Vue({
router: vueRouter
}).$mount('#app')
5.指定路由跳转的连接--路由导航,也就相当于一个a链接
<router-link to='/tab1'>tab1</router-link>
<router-link to='/tab2'>tab2</router-link>
6.路由的出口,将路由指定的组件渲染到页面上,相当于一个占位符号,用来显示路由对应的组件
<router-view></router-view>
路由导航钩子
全局钩子
全局钩子函数有2个：
beforeEach：在路由切换开始时调用
afterEach：在每次路由切换成功进入激活阶段时被调用
