Vue Router慢慢学：起步Dome

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

我们首先通过原生JS简单讲解router的核心原理，然后再用Vue-Router做个Dome~

---

一、前端router核心原理

路由核心原理：根据不同的锚点值做出不同的显示。

我们用原生JS举例说明：

<a href="#/login">点我登陆</a>
<a href="#/register">点我注册</a>
<div id="app"></div>

<script type="text/javascript">
  let oDiv = document.getElementById('app');
  window.addEventListener('hashchange', function() {
    //路由核心原理：根据不同的锚点值做出不同的显示
    switch(location.hash) {
      case '#/login':
        oDiv.innerHTML = '<h1>登陆页面</h1>';
        break;
      case '#/register':
        oDiv.innerHTML = '<h1>注册页面</h1>';
        break;
    }
  });
</script>

(1)

(2) 点击“点我登陆”，出现：

(3)点击“点我注册” 同理。

无论点哪个，页面都是局部刷新，并未整个刷新，因其改变的是锚点值。

---

二、Vue Router

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

下面我们用Vue Router写个和上面一样的例子，

例：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app"></div>

<script type="text/javascript">
  const Login = {template: `<div>我是登陆界面</div>`,};
  const Register = {template: `<div>我是注册界面</div>`,};

  //1、安装插件
  Vue.use(VueRouter);

  //2、创建一个路由对象
  const myRouter = new VueRouter({
    //3、配置路由对象
    routes: [
      {path:'/login', component:Login},
      {path:'/register', component:Register}
    ]
  });

  //5、指定路由改变局部位置
  const App = {
    template: `
      <div>
        <router-link to="/login">点我登陆</router-link>
        <router-link to="/register">点我注册</router-link>
        <router-view></router-view>
      </div>`,
  };

  //4、将配置好的路由对象关联到Vue实例中
  new Vue({
    el: '#app',
    router: myRouter, 
    components: {app: App},
    template: '<app />',
  });
</script>

输出：同第一个例子

• < router-link> 默认会被渲染成一个 <a> 标签
• 路由匹配到的组件将渲染在< router-view>里

---

看上面例子，你会发现如果要经常改锚点的名称，会很不利于项目的维护，我们再改进下：

例子升级版

const Login = {template: `<div>我是登陆界面</div>`,};
const Register = {template: `<div>我是注册界面</div>`,};

//1、安装插件
Vue.use(VueRouter);

//2、创建一个路由对象
const myRouter = new VueRouter({
  //3、配置路由对象
  routes: [
    {name:'login', path:'/myLogin', component:Login},
    {name:'register', path:'/myRegister', component:Register}
  ]
});

//5、指定路由改变局部位置
const App = {
  template: `
    <div>
      <router-link :to="{name: 'login'}">点我登陆</router-link>
      <router-link :to="{name: 'register'}">点我注册</router-link>
      <router-view></router-view>
    </div>`,
};

//4、将配置好的路由对象关联到Vue实例中
new Vue({
  el: '#app',
  router: myRouter, 
  components: {app: App},
  template: '<app />',
});