vue学习基础（7）路由

一、来源

main.js

通过router实例化时传递的router对象。

其中router对象来源于import引入router.js

router.js

1、首先引入vue-router

2、导出router的实例化对象

三部分：

mode为使用什么方式切换路由

mode:‘history’//html5的history api

或 mode:'hash'//以哈希值的形式，带上#

 

base为根路径，会在路径前面加一个base值

base:'/'

 

routes为路由数组

[{

  path:''

name:'',

component:''

},{

}]

异步引入页面组件

当访问的home时才去访问该文件，为了加载的更快，采用异步组件

注册路由组件 

Vue.use(Router);

在其他页面可以使用this.$router调用

this.$router的值如下所示

二、<router-view></router-view>

通过<router-link to="">来进行路由的切换，并显示到<router-view>中

三、传参数

routers的值：

routers:[
    {
        //动态属性,正则需要进行转义
        path:'/demo17/:id(\\d+)'
        path:'/demo17/:id(\\d+)/:type'  传递多个参数，也可以进行正则匹配
        path:'/demo17/:id?+正则匹配',//其中:id的意思是传参数，名字叫做id，id可以为一个变化的值，访问形式可以为localhost:8080/demo17/cndjncd,其中这种形式传参的id对应this.$router中的param属性
        name:'demo17',
        meta:{
            title:"这是demo17"//可以配置meta信息，设置不同的键值对
        }
        component:Demo17

    }
]

四、this.$router中的hash对应访问路径#后面的数据

五、通过js 来切换标签，使用this.$router.push("/路径")来切换,this.$route.replace("/路径")

也可以改变路由切换方式，根据name来切换,默认通过path

通过query属性传递参数，？后面那堆参数

注意，使用path来进行访问的话没有params值的使用

可以传递hash值

this.$router.replace 

this.$router.push()和this.$router.replace()的区别，this.$router.replace()不会产生历史记录

 this.$router.go(-1)

回退或者前进页面，和window.history.go(-1)类似

<router-link to="">

to属性也可以是一个对象

router-link的to属性也能跟push方法一样使用

六、配置子路由children，子路由的path不能写/

使用detail子路由需要在demo17中写上<router-view></router-view>

 

子路由也可以进行动态传递参数

可以传递多个子路由

children:[{},{}]

七、如何配置404页面

{

   path:'*',//使用*号匹配所有没有找到的页面

   name:''

   component:NotFound

}

重定向

别名

访问demo7和demo77777是一样的