vue之路由

一、安装

npm install vue-router --save 

 二、配置

/****** src/router/index.js ******/
// 配置路由相关信息
import VueRouter from "vue-router"
import Vue from "vue"

// 安装插件
Vue.use(VueRouter); 

// 配置路由和组件的关系
const routes = [{
	path:'', // 路由路径
	components: obj, // 引进来的组件
    meta: {}, // 传递一些原始数据
},{}];

// 创建路由对象
const router = new VueRouter({
	routes,
    mode: "history", // history是平时所见的那种地址， hash是会带有“#”，默认值是hash
    base: process.env.BASE_URL, // 如果使用history模式，必须设置base参数
}) ;

// 将router对象传入到Vue对象
export default router; 



/****** main.js中注册路由  ******/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
 
new Vue({
  el:'#app',
  render: h => h(App),
  router:router
})
 

 

1、重定向路由：redirect

通过重定向属性，为默认路径“/” 指向其他定义的路由，也可以为其它需要的路径重定向

const routes = [
  {
    path: '/',
    redirect: '/Home'
  },
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

2、嵌套路由：children

  子组件一定不能在path属性的一开始加上/

const routes = [{
    path: '/xx',
    component: User,
    children: [{
        path: '',
        redirect: 'message'
    }, {
        path: 'message',  // 这里不需要加/
        component: Message,
    }, {
        path: 'news',
        component: News,
        query: {
            id: 111,
            name: '张三'
        }
    }, {
        name: 'news/:id/:name',
        component: News,
        params: {
            id: 111,
            name: '李四'
        }
    }]
}]

 3、命名路由：:占位变量名

<!-- 最终会导向 user/123 的路径 -->
<router-link :to="{ name: 'user', params: { userId: type}}">User</router-link>
<router-link :to="'/user/'+type" tag="button" replace>我的</router-link>

<script>
const type = 123
const routes =  [
  {
    path: '/user/:userId',
    name: 'user',
    component: User
  }
];

...

// js方式
this.$router.push({ name: 'user', params: { userId: type }})
</script>

三、使用

router-view  是一个占位的标签，即路由指向的组件会渲染在该标签的位置上

1、在html中使用：router-link

<template>
  <!-- 是一个内置组件，最终会被渲染成a标签 -->
  <router-link to="/home">首页</router-link> 
  <!-- 传递参数的方式，也可以在配置路由和组件的地方传个query属性 -->
  <router-link :to="{path:'/user/'+type, query: {age:age,height: 190}}">带参数了</router-link>
  
  <router-view />
</template>

router-link标签属性

（1）to：指向指定路由

（2）tag：渲染成指定标签（默认是a标签，可以是button之类的，tag="button"）

（3）replace：禁止掉浏览器默认的向后退按钮（浏览器工具栏那里） 

（4）active-class：被选中的对象，默认值是router-link-active，也可以自定义

         也可以在创建路由的时候指定 linkActiveClass

const router = new VueRouter({
	routes,
    linkActiveClass: 'xxx'
}) ;

2、在js中动态设置路由：this.$router

// 可以回退的
this.$router.push('/user/'+this.type); 

// 不可以回退的
this.$router.replace('/user/'+this.type); 

// 带了参数的
this.$router.replace({
  path: '',
  query: {}
}); 

this.$router：全局路由，在需要切换页面的时候，就会往这个对象塞目标页面

this.$route： 当前活跃的路由，即当前路由指向的组件，可以获取参数值

		query	params
不同点	引入方式【搭配字段】	path	name
	刷新页面，参数	依然存在	会消失
	参数是否可见	会显示在地址栏上	不可见
相同点		都是参数，都属于 this.$route

 四、导航守卫

监听路由跳转的过程，然后做对应的操作

1、全局守卫

const router = new VueRouter({});

// 前置守卫 guard
router.beforeEach((to, from, next) => {
  console.log(to, from, next);
  // 这个方法必须调用，才会继续往下走
  next(); 
});

// 后置钩子 hook
router.afterEach((to, from) => {
  console.log(to, from);
});

2、路由独享守卫

const routes = [
  {
    path: '/foo',
    component: Foo,
    beforeEnter: (to, from, next) => {},
    beforeRouteLeave: (to, from, next) => {}
  }
]

3、组件内守卫

<template>
  <div>组件1111</div>
</template>

<script >
  export default {
    name:"",
    data(){
      return {}
    },
    beforeEnter: (to, from, next) => {},
    beforeRouteLeave: (to, from, next) => {},
  }
</script>

五、<keep-alive />  、 actived()  、deactivated()

实现保留上一个跳转前的选中状态

activated()、deactivated()只有该组件使用了<keep-alive /> 标签才有效果

<template>
  <div>
    <router-link to="/home/message">信息</router-link>
    <router-link to="/home/news">新闻</router-link>
    <!-- exclude中指定的组件，会被重复的销毁创建，属性中不要带空格 -->
    <keep-alive exclude="aa,bb">
        <router-view></router-view>
    </keep-alive>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        paths: '/home/message'
      }
    },
    created() {
    },
    mounted() {
    },
    updated() {
    },
    activated() {
      this.$router.push(this.paths);
      // 如果是配置了默认转向的路由，要么直接去掉重定向，要么在这里做一个判断
      // 判断跳转的路由是否是当前路由，是的话，就跳转，不是的话，就不跳转
      // 不做这种处理的话，会因为重复跳转而报错
    },
    deactivated() {
      // 失去活跃状态的时候，被切换掉的时候
      ...
    },
    beforeRouteLeave(to, from, next) {
      this.paths = this.$route.path;
      next();
    }
  }
</script>