vue-router在.vue单文件组件式开发中的使用问题
初上手不太熟悉, 在vue-router的官方文档中也没有找到结合单文件组件怎么使用. 通过vux的模板摸索如下规律:
- 根目录下面的index.html可以不做任何修改;
- 路由的引入主要是在src目录下的main.js文件中, 示例:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './components/HelloFromVux' // 引入各个 .vue文件, 这儿有HelloFromVux.vue和Hello.vue. 这儿省略了.vue后缀, 需要在webpack的配置文件中配置, 后面说.
import Hello from './components/Hello'
Vue.use(VueRouter) // 单文件组件开发中必须要引入
const routes = [
{path: '/', component: Home},
{path: '/hello', component: Hello}
]
const router = new VueRouter({
routes
})
/* eslint-disable no-new */
new Vue({
el: '#app-box',
router,
render: h => h(App)
}) // .$mount('#app-box')
// .$mount或者 el: 两种方式的mount都可以. 因为是加在在#app-box中的, index.html中的div id需要是app-box
3.项目根目录webpack中配置(webpack.config.js)如下内容可以在import时省略.vue后缀:
resolve: {
extensions: ['.js', '.vue', '.json']
},
- 那么
和 在哪儿放呢? 不用放在index.html里面, 在任何一个.vue文件的template里面都可以, 并且不需要在.vue的script里面import vue-router
例如在app.vue中:
<template>
<div id="app">
i am app
<router-link to='/Hello'>Hello</router-link>
<router-link to='/'>home</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="less">
</style>