vue路由

vue-router

基本使用

  • 下载 npm i vue-router --save
  • 1: 在main.js中引入该对象 import VueRouter from 'vue-router';
  • 2:安装插件 Vue.use(VueRouter);
  • 3: 配置路由规则(创建一个关于当前实例的路由对象)
    • let router = new VueRouter(构造选项);
  • 构造选项: { routes:[ {锚点值,显示什么} ,{锚点值,显示什么} ] }
  • 4:让Vue运行实例能拿到router配置(路由配置)传递给new Vue
  • 5:留坑 <router-view></router-view>
1
2
3
4
5
6
7
8
9
10
11
12
//安装插件
Vue.use(VueRouter); // 到底做了什么
//创建路由对象,配置路由规则
let router = new VueRouter({
routes:[
{// #/home
//路是哪(必须) //显示什么
path:'/home', component:Home
}
]
});
  • 使用方法: <router-link to="/xxxx">电影</router-link>
  • 当这个元素的锚点值与当前的锚点值匹配以后,vue-router就会为其自动加上
  • router-link-active样式 可以方便我们设置用户点中后的效果,以及锚点匹配后的效果
  • 查询字符串
    • 1:去哪里
    • <router-link :to="{name:'bj',query:{id:1} }">查询字符串</router-link>
    • 2:导航(路由规则)
    • {name:'bj' ,path:'/beijing'} -> 生成: href="#/beijing?id=1"
    • 3:去了干嘛
    • this.$route.query.id
  • path的方式
    • 1:去哪里
    • <router-link :to="{name:'bj',params:{id:1} }">查询字符串</router-link>
    • 2:导航(路由规则)
    • {name:'bj' ,path:'/beijing/:id'} -> 生成: href="#/beijing/1"
    • 3:去了干嘛
    • this.$route.params.id

vue-router中的对象

  • 路由信息对象 $route
  • 路由功能对象 $router
  • 安装插件的时候,挂载的相关属性
  • 如果需要在vue中挂载全局的属性供所有组件使用
    • Vue.prototype.xxx = config;
    • this.xxx; //获取配置

多视图(命名视图)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//用以下三个组件替代home一个组件更灵活,便于维护
import HomeHeaderVue from './c/HomeHeaderVue.vue';
import HomeBodyVue from './c/HomeBodyVue.vue';
import HomeFooterVue from './c/HomeFooterVue.vue';
// import Home from './Home.vue'; //头、尾、中 替换成3个组件来完成渲染
//安装插件
Vue.use(VueRouter);
//创建路由对象,配置路由规则
let router = new VueRouter({
routes:[
{
name:'home',path:'/home',
components:{
homeHeader:HomeFooterVue,
default:HomeBodyVue,
homeFooter:HomeHeaderVue,
}
}
]
});

嵌套路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//子路由的视图显示的组件
import Music from './Music.vue';
import Movie from './Movie.vue';
//安装插件
Vue.use(VueRouter);
//创建对象配置路由规则
let router = new VueRouter();
//router-view包含router-view
router.addRoutes([
{ name:'home',path:'/home',component:Home,
children:[
{ name:'home.music',path:'music',component:Music},
{ name:'home.movie',path:'movie',component:Movie},
] }//路由规则存在子路由
]);
--------------------------------------------------------------
//home
<div class="d">我是广告</div>
<router-link :to="{name:'home.music'}">音乐</router-link>
<router-link :to="{name:'home.movie'}">电影</router-link>
<!-- 用户显示子视图个性化数据 -->
<router-view></router-view>

重定向及404

{path:’/‘,redirect:{name:’xxx’} }-> 跳转到另一个路由

1
2
3
4
5
6
7
8
9
let router = new VueRouter({
routes:[
// {path:'/',redirect:'/home'}, 默认的页面
{path:'/',redirect:{name:'home'} }, //维护成本更低
{ name:'home',path:'/myhome',component:Home },
{ path:'*',component:NotFound}, //路由规则是从上到下匹配的
]
});

编程式导航

  • 获取信息对象$route
  • 具备操作行为的对象$router
  • 编程式导航更为灵活,可以以各种事件来触发,并且前后可以加入操作的代码
  • 跳转: this.$router.push({ name:’home’,query:{id:1})
  • 前进和后退: this.$router.go(-1) 后退 go(1)前进

scoped

  • 在style标签上 加上scoped属性
  • 让当前的style样式只对同文件中的template有效

前端权限控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
router.beforeEach((to, from, next) => {
//假如后台返回 当前用户 只有goods类的权限,说明当前用户就不能进入photo
let permissions = 'goods';//假如服务器返回权限
console.log('to',to);
console.log(to.name.startsWith(permissions));
console.log('from',from);
//next(); //放行 行为: 1:放行 ,2:不放行 3:重定向
if(to.name.startsWith(permissions)){
next();
}else{
alert('您好,您不具备权限访问该页面');
next(false);
}
});