webpack 中使用 vue-router 注意

//render 会把el指定的容器中所有的内容都清空把#app也会去掉 都在c(app)其中的app组件中展示 所有router-link router-view要写在app这个组件里面

 

//App 这个组件是通过render 渲染出来的

//account 跟goodslist 是url 路由匹配监听到的 所以这两个组件只能展示到该组件里面的 router-view

http://localhost:3000/#/account　http://localhost:3000/#/goodslist 　

//流程：通过路由切换 然后去找routes 匹配规则 然后找到对应组件 在对应的页面组件中（本案例是App.vue这个组件）找到 router-view 进行路由切换 

 

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

data: {

msg: '123'

},

methods: {},

render: c => c(app), //render 会把el指定的容器中所有的内容都清空把#app也会去掉 都在c(app)其中的app组件中展示 所有router-link router-view要写在app这个组件里面

router

})

 

 

App.vue

 

<template>

<div>

<p>

这是App 组件

</p>

 

<router-link to="/account">account</router-link>

<router-link to="/goodslist">goodslist</router-link>

<router-view></router-view>

</div>

</template>

<script>

export default {

data(){ //组件中的data必须是函数

return {

}

},

methods: {

show: function(){

console.log('调用了show')

}

}

}

</script>

<style scoped>

</style>