vue

在vue组件页面中，集成vue-router路由模块

vue-router官网

1.安装路由

npm i vue-router -S

 

1. 导入路由模块：

import VueRouter from 'vue-router'
​

1. 安装路由模块：

Vue.use(VueRouter);
​

1. 导入需要展示的组件:

import login from './components/account/login.vue'
​
import register from './components/account/register.vue'
​

1. 创建路由对象:

var router = new VueRouter({
​
  routes: [
​
    { path: '/', redirect: '/login' },
​
    { path: '/login', component: login },
​
    { path: '/register', component: register }
​
  ]
​
});
​

1. 将路由对象，挂载到 Vue 实例上:

var vm = new Vue({
​
  el: '#app',
​
  // render: c => { return c(App) }
​
  render(c) {
​
    return c(App);
​
  },
​
  router // 将路由对象，挂载到 Vue 实例上r
​
});
​

1. 改造App.vue组件，在 template 中，添加router-link和router-view：

    <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>



    <router-view></router-view>

Mint-UI中导入:

1. 导入 MUI 的样式表：

import '../lib/mui/css/mui.min.css'

1. 在webpack.config.js中添加新的loader规则：

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }