vue-router
1. Why routing
1. 用于组件与组件之间的跳转
2. 页面跳转
3. 参数传值
2. Routing configuration
main.vue
content.vue
myvue.vue
router index.js in the directory, used to load the routing configuration
// 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. Use routing
Display routing links and views in 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 program entry import 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/>'
})