Vue路由-Router搭建以及简单使用
一、VueRouter介绍
1.所谓的路由就是根据用户不同的访问地址,应用程序给与不同的响应,VueRouter就是官方的路由管理器。
二、配置路由(如果在创建项目的时候没有选择vue-router 就需要手动配置vue-router)
1.在项目文件夹终端输入npm install vue-router 进行加载router,选择版本的话npm install vue-router@3安装版本为3最新的包
2.在src文件夹下新建router文件夹,在该文件夹下边新建index.js文件
3.配置index.js文件,首先导入vue以及vuerouter,然后倒入已经定义好的路由实例,
输入Vue.use(VueRouter)使用router,接着定义路由(定义每个路由实例的name(可有可无),path,component),最后将router接口暴露出去(export defaut router);这个页面就配置好了
import Vue from 'vue';
import VueRouter from 'vue-router';
import Mylist from '../views/Mylist.vue';
Vue.use(VueRouter)
const routes = [
{
path:'/list',
component:Mylist
}
]
const router = new VueRouter({
routes
})
export default router
4.在main.js文件配置路由,在这个页面如果我们创建的时候没有点击路由需要import router from'./router'导入路由,然后再new Vue中添加router就配置好了
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
三、使用路由对页面进行渲染
1.通过router-view使用路由(在App.vue进行使用),在页面内容部分输入<router-view></router-view>标签使用路由,默认匹配路由配置中路径为'/'的
<template>
<div id="app">
<main>
<router-view></router-view>
</main>
</div>
</template>
<script>
import Myheader from "./views/Myheader.vue";
export default{
components:{
MyheaderVue: Myheader
}
}
</script>
<style lang="scss">
</style>
2.简单的路由跳转(router-link)
通过router-link进行简单的路由跳转,通过router-link标签绑定to属性(to属性绑定的是路由的path),点击就会跳转到指定path的路由上了
<template>
<div id="app">
<header>
<MyheaderVue></MyheaderVue>
<router-link to="/list"> 跳转到第一个界面</router-link>
<router-link to="/">首页</router-link>
</header>
<main>
<router-view></router-view>
</main>
</div>
</template>
<script>
import Myheader from "./views/Myheader.vue";
export default{
components:{
MyheaderVue: Myheader
}
}
</script>
<style lang="scss">
</style>
下篇文章深入vue-router的使用