vue的路由是vue,js官方的路由管理器，其主要用于构建单页应用程序，允许你通过定义路由来管理不同页面之间的导航。
1.引入路由
在使用vue的路由之前，一般我们在创建vue项目的时候，是可以选择添加路由的，只要你选择了yes，那么他就会给你自动安装，如果你没有选择，那么我们仍然可以手动引入vue Router,可以使用npm或者yarn进行安装，这就各凭所好了。
npm install vue-router
# 或者
yarn add vue-router
之后，我们在vue的应用的入口文件，通常一般是main.js中，导入Vue和Vue Router，并配置他
import Vue from 'vue';
import VueRouter from 'vue-router'; //引入vue路由
Vue.use(VueRouter); //使用路由
const router = new VueRouter({
routes: [
// 在这里定义你的路由配置
]
});
new Vue({
router,
render: (h) => h(App)
}).$mount('#app');
2.定义路由
在上面的代码中，我们创建了一个router示例，并通过routes选项来定义路由，每个路由都是一个javaScript对象，包含路径（path）和关联的组件(component)。
例如：
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
// 其他路由定义
];
3.创建路由视图
在vue组件中，可以使用<router-view>标签来显示匹配当前路径的组件，这个标签会在页面中渲染出对应的组件。
<template>
<div>
<router-view></router-view>
</div>
</template>
4.导航
可以在应用中通过编程式导航或者通过<router-link>标签进行导航。
函数式导航
使用$router对象进行编程式导航，例如
// 在某个方法中导航到/about路径
this.$router.push('/about');
<router-link>标签
<router-link>标签是一个用于导航的链接，他会自动处理路径和导航的逻辑。
<router-link to="/about">About</router-link>
5.嵌套路由
Vue Router支持嵌套路由，允许你在一个路由内部嵌套另一个路由。这通常用于创建复杂的页面结构。
const routes = [
{
path: '/user',
component: User,
children: [
{ path: '', component: UserProfile },
{ path: 'profile', component: UserProfile },
{ path: 'posts', component: UserPosts }
]
}
];
DEMO
目录结构：
//main.js
//引入Vue组件
import Vue from 'vue';
//引入App组件
import App from './App.vue';
//关闭Vue生产提示信息
Vue.config.productionTip=false;
//引入vue-router插件
import VueRouter from 'vue-router';
//使用VueRouter插件
Vue.use(VueRouter);
//引入路由器
import Router from './router/index';
//创建Vue实例对象nm
const vm = new Vue({
el:'#app',
router:Router,
render(h) {
return h(App);
}
});
console.log(vm);
//App.vue
<template>
<div>
<div class="row">
<Banner></Banner>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html标签中我们使用a标签实现页面跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- <a class="list-group-item" href="./home.html">Home</a> -->
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 路由视图标签：指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Banner from './components/Banner.vue';
export default {
name:'App',
components:{
Banner
}
}
</script>
<style>
</style>
//index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
//引入组件
import About from '../pages/About.vue';
import Home from '../pages/Home.vue';
//创建并暴露一个路由器
export default new VueRouter({
//一组路由
routes:[
{
path:"/about",
component:About
},
{
path:"/home",//路由的路径
component:Home//要跳转的组件
}
]
});
//About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: 'About',
beforeDestroy(){
console.log("About组件将被销毁");
},
mounted(){
console.log("About组件挂载完毕",this);
window.aboutRoute=this.$route;
window.aboutRouter=this.$router;
}
}
</script>
<style>
</style>
//Home.vue
<template>
<h2>我是Home的内容</h2>
</template>
<script>
export default {
name: 'Home',
beforeDestroy(){
console.log("Home组件将被销毁");
},
mounted(){
console.log("Home组件挂载完毕",this);
window.homeRoute=this.$route;
window.homeRouter=this.$router;
}
}
</script>
<style>
</style>
//Banner.vue
<template>
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</template>
<script>
export default {
name:'Banner'
}
</script>
<style>
</style>
