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>