在webpack中使用VueRouter

時間 2019-12-11

標籤 webpack 使用 vuerouter 简体版

原文原文鏈接

先上代碼:html

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>


複製代碼

相關標籤/搜索

vuerouter

webpack+vue+vuerouter

每日一句

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