2月11日-vue-cli 路由(1)

Profile Picture
Published on Feb 11, 2020🌏 Public

路由

引子

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>