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

安装 vue-router

cnpm i vue-router -S

index.html

<!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.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'

// 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.vue

<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。

路由嵌套

在account组件中加上登录和注册

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.vue

<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>

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

路由嵌套

style中 lang属性和scoped

猜你喜欢