Vue路由入门
1.在src目录下创建components文件夹用于存放组件文件
1.1 在components文件夹中创建Main.vue、Title.vue文件
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
<template>
<div>
<h1>标题</h1>
</div>
</template>
<script>
export default {
name: "Title"
}
</script>
2.在src目录下创建router文件夹,用于存放路由配置文件(Vue中默认使用index.js文件作为配置文件)
2.1 在route文件下创建index.js文件配置路由
import Vue from 'vue'
//导入路由插件
import Router from 'vue-router' //使用脚手架工具下载vue-router插件后才能在此使用
//导入组件
import Main from "../components/Main"
import Title from "../components/Title"
//安装路由
Vue.use(Router);
//配置路由
export default new Router({
routes: [
{
//路由路径
path: '/main',
//路由名称
name: 'main',
//跳转到组件
component: Main
},
{
path: '/title',
name: 'title',
component: Title
}
]
});
3.将rouer文件引入main.js(main.js是程序的入口)
import Vue from 'vue'
import App from './App'
//导入创建的路由配置目录
import router from './router'
Vue.cofig.productionTip = false
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
4.在App.vue中使用路由
<template>
<div id="app">
<!--
router-link: 默认会被渲染成一个<a>标签,to 属性为指定链接
router-view: 用于渲染路由匹配到的组件
-->
<router-link to="/main">首页</router-link>
<router-link to="/title">标题</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app{
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5.npm -run dev 启动测试