1、为什么要路由
1. 用于组件与组件之间的跳转
2. 页面跳转
3. 参数传值
2、路由配置
main.vue
content.vue
myvue.vue
router目录下的index.js,用于加载路由配置
// vue-router配置
import Vue from 'vue'
import VueRouter from 'vue-router' // 从node_modules 中导入安装好的vue-router
// 导入自定义组件
import Content from '../components/content'
import Main from '../components/main'
import myvue from "../components/myvue";
// 安装路由
Vue.use(VueRouter)
// 配置路由导出
export default new VueRouter({
routes: [
{
// 指定路由路径
path: '/content',
name: 'content',
// 跳转的组件
component: Content,
children: [ // 路由嵌套
{
path: '/myvue',
component: myvue
}
]
}, {
path: '/main',
name: 'main',
component: Main
}
]
})
3、使用路由
在app.Vue 里面展示路由链接和视图
<!-- 主模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
<!-- 跳转链接 -->
<router-link to="/main">首页</router-link>
<router-link to="/content">content page</router-link>
<!-- 展示视图 -->
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
</style>
main.js程序入口导入router
// 导包
import Vue from 'vue'
import App from './App'
import router from './router' // 自动扫描router里面的路由配置 index.js
new Vue({
el: '#app',
router, // 指定路由
components: {
App },
template: '<App/>'
})