vue公用跳转文件_单文件组件和Vue中的路由（页面跳转的实现）

单文件组件格式如下

//放置组件模板

export default {

name: ' '

}

Vue中的路由

路由就是根据网址的不同，返回不同的内容给用户。

实现不同网页显示不同的内容。

实现点击某些DOM元素跳转到某些页面。

因为点击某些元素运行了某函数并在函数中实现页面跳转 this.$router.push(" ")

入口文件main.js挂载了app这个挂载点，同时引入App组件和路由。

//main.js文件

import App from './App'

import router from './router' //vue自动引入了router文件夹下的index.js文件

new Vue({

el: '#app', //挂载点

// 键和值一样，写一个即可

router, // router:router

store, // store:store

components: { App },// components: { App :App},

template: ''

})

App.vue组件中使用写入了路由，使得每个页面显示的是根据路由设置当前地址所对应的内容。

//App.vue文件

export default {

name: 'App'

}

以下为router目录下的index.js文件，