vue 路由模块化
项目结构
main.js
import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/css/basic.scss'; import router from './router/router.js'; //4、挂载路由 new Vue({ el: '#app', router, render: h => h(App) })
app.vue
<template> <div id="app"> <header class="header"> <router-link to="/home">首页</router-link> <router-link to="/news">新闻</router-link> <router-link to="/user">用户</router-link> </header> <hr> <router-view></router-view> </div> </template> <script> export default { data () { return { msg:'你好vue' } } } </script> <style lang="scss"> .header{ height:4.4rem; background:#000; color:#fff; line-height:4.4rem; text-align:center; a{ color:#fff; padding:0 2rem } } </style>
router.js
import Vue from 'vue'; //配置路由 import VueRouter from 'vue-router'; Vue.use(VueRouter); //1.创建组件 import Home from '../components/Home.vue'; import News from '../components/News.vue'; import User from '../components/User.vue'; //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', component: News, name: 'news' }, { path: '/user', component: User }, { path: '*', redirect: '/home' } /*默认跳转路由*/ ] //3.实例化VueRouter 注意:名字 const router = new VueRouter({ mode: 'history', /*hash模式改为history*/ routes // (缩写)相当于 routes: routes }) //5 <router-view></router-view> 放在 App.vue export default router;
Home.vue
<template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 我是首页组件 </div> </template> <script> export default{ data(){ return { msg:'我是一个home组件', value1: null, } } } </script> <style lang="scss" scoped> </style>
其他组件类似home.vue