vue 路由模組化
阿新 • • 發佈:2020-09-06
專案結構
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> exportdefault { 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