安装vue-router
cnpm install vue-router --save-dev
在node_modules目录中可以找到 vue-router 说明安装成功了
安装完运行报错因为可能是router版本太高了,先用cnpm install vue-router@3.1.3 --save-dev命令再运行。
创建文件和组件
在src目录下创建router文件夹,在里边创建index.js,Vue运行时会自动扫描router目录下的index.js文件
index.js
//引入依赖包
import Vue from "vue";
import VueRouter from "vue-router";
//导入组件1 (Main)
import Main from "../components/Main";
//导入组件2 (Component)
import Component from "../components/Component";
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes:[
{
//路由路径
path:"/component",
//路由名字(没有也行)
name:"component",
//要跳转的组件
component:Component
},
{
//路由路径
path:"/Main",
name:"Main",
//要跳转的组件
component:Main
},
]
})
创建组件1
<template>
<h1>首页!</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<!--scoped的意思是作用域,样式只在本组件生效-->
<style scoped>
</style>
创建组件2
<template>
<h1>你好</h1>
</template>
<script>
export default {
name: "Component"
}
</script>
<style scoped>
</style>
App.vue整合
<template>
<div id="app">
<h1>Vue_Router</h1>
//相当于a标签,引入链接
<router-link to="Main">首页</router-link>
<router-link to="component">组件页</router-link>
//展示模板,没有的话不显示组件模板内容
<router-view></router-view>
</div>
</template>
<script>
//引入依赖包
import Vue from "vue"
import VueRouter from "vue-router"
//创建路由
Vue.use(VueRouter)
//导入组件
import Component from './components/Component'
import Main from './components/Main'
//暴露接口
export default {
name: 'App',
components: {
//HelloWorld,
Component,
Main
}
}
</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>
实施
mian.js程序主入口
在vue实例中配置路由只需要一句 router
import router from “./router”; //导入router,默认扫描次目录下的index文件
//引入依赖
import Vue from 'vue'
import App from './App'
import router from "./router"; //默认扫描router文件下的index文件
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
运行
npm run dev
运行报错因为可能是router版本太高了,先用cnpm install vue-router@3.1.3 --save-dev命令再运行。
终止
ctrl+c
总结:
创建一个目录,在目录中创建Vue组件,在templete模板中编辑内容,之后在创建好的router目录下的index.js文件中引入相关依赖,导入创建好的Vue组件,安装路由 Vue.use(VueRouter) 然后显式暴露一个VueRouter接口
export default new VueRouter({
routes:[
{
//路由路径
path:"/component",
//路由名字(没有也行)
name:"component",
//要跳转的组件
component:Component
}
然后再由Vue.app整合内容
<!--模板-->
<template>
<div id="app">
<h1>Vue_Router</h1>
//相当于a标签,引入链接
<router-link to="Main">首页</router-link>
<router-link to="component">组件页</router-link>
//展示模板,没有的话不显示组件模板内容
<router-view></router-view>
</div>
</template>
<script>
//引入依赖包
import Vue from "vue"
import VueRouter from "vue-router"
//创建路由
Vue.use(VueRouter)
//导入组件
import Component from './components/Component'
import Main from './components/Main'
//暴露接口
export default {
name: 'App',
components: {
//HelloWorld,
Component,
Main
}
}
</script>
最后配置main.js
**mian.js程序主入口**
*在vue实例中配置路由只需要一句 **router***
*import router from "./router"; //导入router,默认扫描次目录下的index文件*
//引入依赖
import Vue from 'vue'
import App from './App'
import router from "./router"; //默认扫描router文件下的index文件
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
ok!