import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes';
Vue.use(Router)
export default new Router({
mode: 'history', // 不使用#方式
base: process.env.BASE_URL,
routes
});
// routes.js文件是专门处理路由的 配置影射关系
export default [
{
path:'/',
redirect: {name:'home'} // 默认访问根路径时 可以重定向到home路由
},
{
name:'home',
path:'/home', // 实现了路由的懒加载
component:()=>import('../views/Home.vue')
},
{
path:'/profile',
name:'profile',
component:()=>import('../views/Profile.vue')
},
{
path:'/user',
name:'user',
component:()=>import('../views/User.vue')
},
{
path:'/login',
name:'login',
component:()=>import('../views/Login.vue')
},
{
path:'*',
component:()=>import('../views/404.vue')
}
]
引入bootstrap,进行安装
yarn add bootstrap@3
import 'bootstrap/dist/css/bootstrap.css'
<template>
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
管理系统
</a>
</div>
<ul class="navbar-nav nav">
<li>
<router-link :to="{name:'home'}">首页</router-link>
</li>
<li>
<router-link :to="{name:'profile'}">个人中心</router-link>
</li>
<li>
<router-link :to="{path:'/user'}">用户管理</router-link>
</li>
<li>
<router-link :to="{name:'login'}">登录</router-link>
</li>
</ul>
</div>
</nav>
</div>
</template>
在项目中一般情况是不使用命名视图的
{
name:'home',
path:'/home', // 实现了路由的懒加载
components:{ // 当前路径 匹配对个router-view
default:()=>import('../views/Home.vue'),
name:()=>import('../components/Name.vue'),
version:()=>import('../components/Version.vue')
}
}
父路径跳转必须使用路径跳转使用nam, 不显示默认孩子
{
path:'/user',
name:'user',
component:()=>import('../views/User.vue'),
children:[ // 子路由配置
{
path:'', // 如果渲染默认路由 必须使用path跳转
redirect:{name:'userAdd'}
},
{
name:'userAdd',
path:'userAdd',
component:()=>import('../views/UserAdd')
},
{
name:'userList',
path:'userList',
component:()=>import('../views/UserList')
}
]
},
// user.vue
<template>
<div class="row">
<div class="col-md-3">
<nav class="nav nav-stacked">
<li>
<router-link :to="{name:'userAdd'}">用户添加</router-link>
</li>
<li>
<router-link :to="{name:'userList'}">用户列表</router-link>
</li>
</nav>
</div>
<div class="col-md-9">
<router-view></router-view>
</div>
</div>
</template>
<template>
<div>
<button class="btn btn-primary" @click="login">登录</button>
</div>
</template>
<script>
export default {
methods: {
login(){
this.$router.push({name:'login'})
}
},
}
</script>
beforeRouteLeave (to, from, next) {
if(this.username){
let confirm = window.confirm('确认离开吗');
if(confirm) return next();
}else{
next();
}
}
beforeRouteEnter(to,from,next){
// 在进入路由之前可以对数据校验 ajax获取
let user = JSON.parse(localStorage.getItem('user')) || [];
if(user.length){
next();
}else{
next({name:'userAdd'})
}
},
{
name:'userDetail',
path:'userDetail',
component:()=>import('../views/UserDetail')
},
{
name:'detail',
path:'userDetail/:name', // 路径参数 必须通过name跳转
component:()=>import('../views/UserDetail')
}
// 不同方式的传递参数
<td><router-link :to="{name:'userDetail',query:{id:u.id}}">{{u.id}}</router-link></td>
<td><router-link :to="{name:'detail',params:{name:u.username}}"> {{u.username}}</router-link></td>
// 取值方式
查询字符串 {{this.$route.query && this.$route.query.id}} <br>
查询参数 {{this.$route.params && this.$route.params.name}} <br>
router.beforeEach((to,from,next)=>{
let needLogin = to.matched && to.matched.some(({meta})=>{
return meta && meta.needLogin
});
let isLogin = localStorage.getItem('login')
if(needLogin){
if(isLogin){
next();
}else{
next({name:'login'});
}
}else{
// 如果不需要登录 并且是登录页面
if(!(to.name == 'login' && isLogin)){
next();
}
}
});
// watch:{
// $route(){
alert('参数变化')
}
// }
beforeRouteUpdate(){ // 如果组件被复用 唯一的方式 就是监听路由的更新方法
console.log('路由更新了')
}
.router-link-active{
color:red!important
}
.nav-stacked .router-link-active{
color:blue !important
}
<div class="container">
<transition-group name="fade" >
<router-view key="1"></router-view>
<router-view key="2" name="name"></router-view>
<router-view key="3" name="version"></router-view>
</transition-group>
</div>
.fade-enter{ opacity:0}
.fade-enter-active{ transition:all 0.2s linear;}
.fade-enter-to{opacity:1}
.fade-leave{opacity:1}
.fade-leave-active{transition:all .2s linear}
.fade-leave-to{opacity:0}