《webpack》之从入门到放弃 -- 学习笔记【四】结合webpack使用vueRouter

一、结合webpack使用vueRouter

1、创建App.vue组件

<template>
    <div>
        <h1>这是App组件模板页面</h1>
    </div>
</template>
<script>
</script>

<style>
</style>

2、main.js中导入vue模块，并引入App组件

import Vue from 'vue'
　import app from './App.vue'

3、创建vue实例，并使用render 函数将App组件挂载到index.html 中被vue实例控制得div上

index.html中：

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

main.js中创建vue实例：

var vm = new Vue({
    el:'#app',
    render :function(createElements){
        return createElements(app);
    }
})

4、npm run dev运行项目可以成功显示APP组件的内容。

5、src目录下新建main文件夹，分别创建 GoodsList.vue 和 Account.vue.

 GoodsList.vue:

<template>
    <div>
        <h1>这是Goodlists组件模板页面</h1>
    </div>
</template>
<script>
</script>
<style>
</style>

 

 Account.vue.:

<template>
    <div>
        <h1>这是Account组件模板页面</h1>
    </div>
</template>
<script>
</script>
<style>
</style>

 

 6、开始使用vue路由 vue-router。按照vue官网示范，结合webpack开始使用vue-router：

　　①：在终端中 npm i vue-router -s 导入vue-router

　　②:  如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能　：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

 

7、在main.js中引入  GoodsList.vue: 和  Account.vue.:。并创建路由对象控制这两个组件（注意：路由规则中是routes，不要错写成routers），并且将路由对象router挂在在vue实例中，最终完整main.js如下：

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import app from './App.vue'

import account from './main/Account.vue'
import goodsList from './main/GoodsList.vue'

var router = new VueRouter({
    routes:[
        {path:"/account",component:account},
        {path:"/goodsList",component:goodsList}
    ]
})
var vm = new Vue({
    el:'#app',
    render :function(createElements){
        return createElements(app);
    },
    // component:[
    //     app
    // ],
    router
})

 8、最后在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>
</script>
<style>
</style>

 9、npm run dev运行项目成功：

 

二、结合webpack实现子路由嵌套

1、在src目录下新建子组件文件夹subcom，分别创建 Login.vue 和 Register.vue.

 Login.vue:

<template>
    <div>
        <h1>这是Account组件的 登陆子组件页面</h1>
    </div>
</template>
<script>
</script>
<style>
</style>

Register.vue.:

<template>
    <div>
        <h1>这是Account组件的 注册子组件页面</h1>
    </div>
</template>
<script>
</script>
<style>
</style>

2、在main.js中导入 登陆子组件和 注册子组件。并在 路由规则中加入子组件路由规则：

//导入登陆子组件和 注册子组件
import login from './subcom/Login.vue'
import register from './subcom/Register.vue'
var router = new VueRouter({
    routes:[
        {
            path:"/account",
            component:account,
            children:[
                {path:'login',component:login},
                {path:'register',component:register}
            ]
        },
        {path:"/goodsList",component:goodsList}
    ]
})

3、最后在Account.vue中写子组件路由链接入口

<template>
    <div>
        <h1>这是Account组件模板页面</h1>

        <router-link to="/account/login">登陆></router-link>
        <router-link to="/account/register">注册></router-link>
        <router-view ></router-view>
    </div>
</template>
<script>
</script>
<style>
</style>

4、npm run dev运行项目成功：

 

posted @ 2021-04-09 15:59  LZ1024  阅读(60)  评论(0)  编辑  收藏  举报