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