2月11日-vue-cli 路由(1)
路由
引子
HTML5中提供了一个可以修改浏览器地址（访问历史记录）接口。通过这个接口就可以实现，不重新加载页面，通过脚本修改地址栏上的地址信息。
HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史
<!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>
</head>
<body>
<button onclick="history.back()">后退</button>
<button onclick="history.forward()">前进</button>
<button onclick="add()">增加一条记录</button>
<button onclick="r()">替换当前记录</button>
<script>
function add() {
var data = { i: 1 };
//添加一条浏览记录
history.pushState(data, '你好', '/123.html')
}
function r() {
var data = { i: 1 };
//替换当前浏览记录
history.replaceState(data, '你好', '/aaa.html')
}
/***
* 每当活动的历史记录项发生变化时， popstate 事件都会被传递给window对象。
* 如果当前活动的历史记录项是被 pushState 创建的，或者是由 replaceState 改变的，
* 那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。
*/
window.onpopstate = function (e) {
console.log(e)
}
</script>
</body>
</html>通过这个技术，我们就可以实现页面只有一个，但是浏览器的历史记录、地址栏的地址，都可以变更。就对于用户来讲，可以产生在访问多个页面的错觉。
安装路由包
建立项目时，可以勾选router组件。
如果已经创建的项目，没有router。
npm i vue-router路由的基础应用
import Vue from 'vue'
import App from './App.vue'
import a1 from './components/11.vue';
import a2 from './components/22.vue';
import Router from 'vue-router';
// 注册路由相关的组件
Vue.use(Router);
//1. 建立路由规则
var routerRule=[
{
path:'/a', //访问地址
component: a1 //显示哪个组件
},
{
path:'/b',
component: a2
}
]
//2. 根据路由配置对象，建立一个路由的实例
var router = new Router({
mode:'history', //对于IE9，会自动降级到hash模式
routes:routerRule //路由规则
});
new Vue({
//3. 为vue实例设定路由
router:router,
el: '#app',
render: h => h(App)
})<template>
<div id="app">
<!--路由的视图位置-->
<router-view></router-view>
<p>
a：
<a href="/a">跳到a</a>
<a href="/b">跳到b</a>
</p>
<p>
router-link：
<router-link to="/a">跳到a</router-link>
<router-link to="/b">跳到b</router-link>
</p>
{{hello}}
</div>
</template>
<script>
export default {
components: {},
data() {
return { hello: "你好" };
}
};
</script>
