在webpack中使用VueRouter

最新推荐文章于 2019-07-02 15:44:48 发布

洒满阳光的庄园

最新推荐文章于 2019-07-02 15:44:48 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签：在webpack中使用VueRouter

本文链接：https://blog.youkuaiyun.com/weixin_44145479/article/details/89852776

webpack 专栏收录该内容

4 篇文章

订阅专栏

博客展示了在webpack中使用VueRouter的相关代码，包含index.html、test.js、login.vue、account.vue和list.vue等文件内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上代码:

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">
        
    </div>
</body>
</html>

test.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//这一句很容易忽略
import login from './login.vue'
import account from './main/account.vue'
import list from './main/list.vue'
let router = new VueRouter({
    routes:[
        {path:'/account',component:account},
        {path:'/list',component:list}
    ]
})

let vm = new Vue({
    el:'#app',
    data:{

    },
    router,
    render:c=>c(login)
})

login.vue

<template>
    <div>
        <h1>app组件</h1>
        <router-link to='/account'>account</router-link>
        <router-link to='/list'>list</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
</script>

<style>

</style>

account.vue

<template>
    <div>
        <p>注册组件regiest</p>
    </div>
</template>
<script>
</script>
<style>

</style>

list.vue

<template>
    <div>
        <p>列表goodslist</p>
    </div>
</template>
<script>

</script>
<style>

</style>