Vue之自建管理后台(三)登录页面

在做登录页面之前,我们必须得完成路由的设定。。。

按照之前的设计我们路由的文件夹是src/router

官方默认的index.js,如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/view/components/HelloWord'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

你可以吧这个index.js改成

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

routes:[

  {

    path:'/',

    componet:rsolve=>require(['@components/HelloWord'],resolve),

  }

]

效果是一样的,都是加载HelloWord的文件,作为'/'的访问页面。

配置完成后我们访问 http://localhost:port的时候 在域名后面会有一个锚点#,如下http://localhost:8080/#/

那是因为vue默认的router模式是Hash模式,我们需要手动改为history模式。

去掉#的方法 我们可以加上 mode: 'history',

Router进阶一:https://www.cnblogs.com/jeckyhuang/p/11441951.html

未完待续...

猜你喜欢

转载自www.cnblogs.com/jeckyhuang/p/11437719.html