Vue路由详解

配置路由的步骤

1. 先在根路径下建立router/index.js文件，在该文件中配置路由；
2. 将配置好的路由暴露出来，以便main.js进行全局引用；
3. 根据配置的路由路径，可进行页面的跳转。

配置路由

import Vue from 'vue'
import ElementUI from 'element-ui'
import Router from 'vue-router'

//将需要进行路由的组件先引入
import login from '../view/loginwdd'
import test from '../view/test'
import loginCh from '../view/loginCh'

Vue.use(Router)
Vue.use(ElementUI)

const router=new Router({
    //访问时没有#号
    // 'hash'的状态时，访问链接里面会出现#号
    mode:'history',
    routes:[
        {
            path:'/',//路由地址
            name:'login',
            component:login,//被路由的组件
            //该路由下面的子路由
            children:[
                {
                	//子路由不要再加斜杠
                    path:'loginch',
                    component:loginCh
                },
                {
                	//params传递参数时的站位符 :id,:title
                    path:'loginch/:id/:title',
                    component:loginCh
                }
            ]
        },
        {
            path:'/test',
            name:'test',
            component:test
        },
        //表示最后没有找到对应的路由，我们重定向到根路径
        {
            path:'*',
            redirect: '/'
        },
    ]
})
//将路由暴露出去
export default router

通过路由进行页面跳转的方式

1. 通过router-link实现路由
2. 通过this.$router.push的方式实现路由

不管通过哪种方式进行路由，需要将路由的界面显示在哪里，就在哪里配置router-view即可

1、router-link方式

	<router-link to="需要跳转的路径">
     </router-link>

2、this.$router.push方式

最基本用法，与router-link一个意思

this.$router.push("需要跳转的路径");

带参数路由

第一种方式

路由跳转

this.$router.push({path:"需要跳转的地址",query:{value:2}});

获取路由参数

 this.$route.query

path和query成对使用

第二种方式

路由跳转

this.$router.push({name:"需要跳转的地址",params:{value:2}});

获取路由参数

  this.$route.params

name和params成对使用

3、this.$router.replace方式

与push的使用方法一模一样，区别在于replace跳转不会记住上一步所访问的路径

4、this.$router中的游览器记录

this.$router.back() //回退到上一个界面
this.$router.forward() //前进到下一个界面
this.$router.go(number) //需要传递一个数字，正数1表示前进1步，负数1表示回退一步

如何打开一个新窗口

let routerData=this.$router.resolve({path:'需要跳转的地址'});
      window.open(routerData.href,"_blank");

路由缓存

用keep-alive标签将路由视图包裹后，即可在页面跳转后，还会保存该组件的数据

	缓存多个则写成数字形式   :include="['组件1的name值','组件1的name值']"
	<keep-alive include="组件中的name值">  
      <router-view></router-view>
    </keep-alive>