路由
2019-09-27 本文已影响0人
疯狂的蜗牛Dianna
路由: 是浏览器URL中的哈希值(# hash)与展示视图内容 之间的对应规则
指路
在web App 中,通过一个页面来展示和管理整个应用的功能
vue中的路由: 是hash 和component的对应关系，一个hash值对应一个组件
基本使用
基本使用
1.安装路由:
npm i vue-router
2.引入路由
3.实例化路由 + 把路由和vue关联起来
详细步骤 ：四个步骤(入口 => 规则 => 组件 => 出口)
1.入口 (先用url地址作为入口)
2.设置路由匹配规则
3.注册组件
4.出口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
<!-- <one></one>
<Two></Two>
<Three></Three> -->
</div>
</body>
<script>
let One = Vue.component('One', {
template: `<div>组件: One</div>`
});
let Two = Vue.component('Two', {
template: `<div>组件: Two</div>`
});
let Three = Vue.component('Three', {
template: '<div>组件: Three</div>'
});
// 实例化路由
const router = new VueRouter({
// 设置路由规则
routes: [{
path: '/one',
component: One
}, {
path: '/two',
component: Two
}, {
path: '/three',
component: Three
}]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router,
});
</script>
</html>
命名视图 (多出口)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.Head {
font-weight: 400;
font-size: 40px;
text-align: center;
height: 100px;
line-height: 100px;
background-color: pink;
}
/* 父元素 */
.father {
display: flex;
}
.Left {
background-color: red;
height: 100px;
flex: 2;
}
.Right {
background-color: blue;
flex: 8;
height: 100px;
}
</style>
<body>
<div id="app">
<router-view class="Head" name="Head"></router-view>
<router-view class="Left" name="Left"></router-view>
<router-view class="Right" name="Right"></router-view>
</div>
</body>
<script>
//3. 组件
const header = {
template: `<div>头部</div>`,
};
const left = {
template: `<div>左侧</div>`
};
const right = {
template: `<div>右侧</div>`
};
// 2.路由
const router = new VueRouter({
routes: [{
path: '/index',
components: {
Head: header,
Left: left,
Right: right
}
}]
});
// 1.实例
const vm = new Vue({
el: '#app',
data: {},
methods: {},
router,
});
</script>
</html>
页面显示
01.png
