在vue组件页面中,集成vue-router路由模块
1.安装路由
npm i vue-router -S
-
导入路由模块:
import VueRouter from 'vue-router'
-
安装路由模块:
Vue.use(VueRouter);
-
导入需要展示的组件:
import login from './components/account/login.vue' import register from './components/account/register.vue'
-
创建路由对象:
var router = new VueRouter({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: login }, { path: '/register', component: register } ] });
-
将路由对象,挂载到 Vue 实例上:
var vm = new Vue({ el: '#app', // render: c => { return c(App) } render(c) { return c(App); }, router // 将路由对象,挂载到 Vue 实例上r });
-
改造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中导入:
-
导入 MUI 的样式表:
import '../lib/mui/css/mui.min.css'
-
在
webpack.config.js
中添加新的loader规则:
{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }