Vue路由入门

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 启动测试