Vue系列之 => 結合webpack使用vue-router

時間 2019-11-16

標籤 vue 系列結合 webpack 使用 router 简体版

原文原文鏈接

安裝 vue-routercss

cnpm i vue-router -Shtml

index.htmlvue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <app></app>
    </div>
</body>

</html>

main.jsvue-router

import Vue from 'vue'
// 1，導入 vue-router包
import vueRouter from 'vue-router'
// 導入app組件
import app from './app.vue'
// 導入其餘組件
import account from './components/account.vue'
import goodslist from './components/goodslist.vue'

// 2，手動安裝vueRouter
Vue.use(vueRouter);

// 3，建立路由對象
var router = new vueRouter({
    routes : [
        // account goodslist
        { path : '/account' , component : account},
        { path : '/goodslist' , component : goodslist}
    ]
})

var vm = new Vue({
    el : '#app',
    render : c => c(app), // render會把el 指定的容器中全部的內容都清空覆蓋
    // 因此不要把router-view和router-link直接寫到 el 所控制的元素中。
    router
})
// 注意app這個組件是經過vm實例的render函數渲染的，render函數若是要渲染組件
// 渲染出來的組件只能放到el : '#app' 所指定的元素中去。
// account 和 goodslist組件是經過路由匹配監聽到的，因此，這兩個組件只能展現到
// 屬於路由的<router-view></router-view>中去。

app.vuenpm

<template>
    <div>
        <h1>app組件</h1>

        <router-link to="/account">account</router-link>
        <router-link to="/goodslist">goodslist</router-link>
        <router-view>
            
        </router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="">
    
</style>

account.vue和goodslist.vue組件爲簡單的template。app

路由嵌套

在account組件中加上登陸和註冊less

main.js函數

import Vue from 'vue'
// 1，導入 vue-router包
import vueRouter from 'vue-router'
// 導入app組件
import app from './app.vue'
// 導入其餘組件
import account from './components/account.vue'
import goodslist from './components/goodslist.vue'
import login from './components/login.vue'
import register from './components/register.vue'
// 2，手動安裝vueRouter
Vue.use(vueRouter);

// 3，建立路由對象
var router = new vueRouter({
    routes: [
        // account goodslist
        {
            path: '/account',
            component: account,
            children : [
                { path : 'login' , component : login},
                { path : 'register' , component : register}
            ]
        },
        {
            path: '/goodslist',
            component: goodslist
        }
    ]
})

var vm = new Vue({
    el: '#app',
    render: c => c(app), // render會把el 指定的容器中全部的內容都清空覆蓋
    // 因此不要把router-view和router-link直接寫到 el 所控制的元素中。
    router
})
// 注意app這個組件是經過vm實例的render函數渲染的，render函數若是要渲染組件
// 渲染出來的組件只能放到el : '#app' 所指定的元素中去。
// account 和 goodslist組件是經過路由匹配監聽到的，因此，這兩個組件只能展現到
// 屬於路由的<router-view></router-view>中去。

account.vueui

<template>
    <div>
        <router-link to="/account/login">登陸</router-link>
        <router-link to="/account/register">註冊</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="">
    
</style>

style中 lang屬性和scoped

<style lang="scss" scoped>
// scoped只讓樣式在當前組件生效
/* 普通的style標籤只支持普通的樣式 */
/* 要啓用scss或less，須要爲style元素設置lang屬性 */
body {
  div {
      color: green;
  }
}
</style>

抽離路由模塊

須要把vuerouter，和引入的組件，抽離到router.jsspa

router.js 須要注意：main.js和router.js 都須要導入vue-router

// 導入其餘組件
import account from './components/account.vue'
import goodslist from './components/goodslist.vue'
import login from './components/login.vue'
import register from './components/register.vue'
import vueRouter from 'vue-router'

// 3，建立路由對象
var router = new vueRouter({
    routes: [
        // account goodslist
        {
            path: '/account',
            component: account,
            children : [
                { path : 'login' , component : login},
                { path : 'register' , component : register}
            ]
        },
        {
            path: '/goodslist',
            component: goodslist
        }
    ]
})

// 向外暴露 router
export default router

相關標籤/搜索

webpack+vue+vuerouter

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。