vue-router 学习笔记

• 安装vue-router

npm install vue-router --save

• 在main.js(应用的入口文件)中写入以载入vue-router

import Vue from 'vue'
import routes from './vue-router/vue-router-config.js'
import vue-router from 'vue-router'
Vue.use(vue-router)
const router = new VueRouter({
    routes:routes
})
new Vue({
    el:'#app',
    router:router
})

• 新建一个 vue-router文件夹 并编辑一个 vue-router-config.js的 配置文件

import youCompontentName from './thePathOfYouCompontent'
import youCompontentName2 from './thePathOfYouCompontent2'
import youCompontentName3 from './thePathOfYouCompontent3'
//导入自己的页面组件


export default [
    {
        path:'youWantThePathOfYouCompontent',//你这个组件的url名称,唯一值
        name:'noPossibleButSometimeIsUseful',//唯一值,非必须,但是有时很有用
        compontent: youCompontentName  //引用上面导入的组件
    },
    {
        path:'youWantThePathOfYouCompontent2',
        name:'noPossibleButSometimeIsUseful2',
        compontent: youCompontentName2
    },
    {
        path:'youWantThePathOfYouCompontent3/:name/:age', //带参数的情况
        name:'noPossibleButSometimeIsUseful3',
        compontent: youCompontentName3
    },
]

• 在页面中使用路由

<div>
    <router-link to='youWantThePathOfYouCompontent2'>linkA</router-link>    //类似于a标签,to内为跳转到的路由名称
    <router-link :to="'youWantThePathOfYouCompontent3/'+name+'/'+20">linkB</router-link>   //如果路由名是动态生成的,可以用v-bind绑定
</div>
<div>
    <router-view></router-view>
</div>

• 获取路由的参数

在视图页面,要是想获取当前路由的参数可以用以下方法

$router.params.name
//获取路由传参
$router.query.name
//获取url传参

• 子路由
  

  仅在路由配置列表中加入children就可以了,

import youCompontentName from './thePathOfYouCompontent'
import youCompontentName2 from './thePathOfYouCompontent2'
import youCompontentName3 from './thePathOfYouCompontent3'
import youChilcCompontentName from './thePathOfYouChildCompontent'
import youChilcCompontentName1 from './thePathOfYouChildCompontent1'
//导入自己的页面组件


export default [
    {
        path:'youWantThePathOfYouCompontent',//你这个组件的url名称,唯一值
        name:'noPossibleButSometimeIsUseful',//唯一值,非必须,但是有时很有用
        compontent: youCompontentName  //引用上面导入的组件
    },
    {
        path:'youWantThePathOfYouCompontent2',
        name:'noPossibleButSometimeIsUseful2',
        compontent: youCompontentName2,
        children:[
           {
                path:'youWantThePathOfYouChildCompontent', 
                name:'noPossibleButSometimeIsUseful4',
                compontent: youChildCompontentName
            },{
                path:'youWantThePathOfYouChildCompontent2', 
                name:'noPossibleButSometimeIsUseful5',
                compontent: youChildCompontentName2
            }, 
        ]
    },
    {
        path:'youWantThePathOfYouCompontent3/:name/:age', //带参数的情况
        name:'noPossibleButSometimeIsUseful3',
        compontent: youCompontentName3
    },

]

然后你就可以在youCompontentName2中的进行子路由的跳转了 当然如果你嫌

 <router-link to='youWantThePathOfYouCompontent2/youWantThePathOfYouChildCompontent2'>linkA</router-link>  

中的链接太长的话,你也可以这么写

 <router-link to='youWantThePathOfYouChildCompontent2' append>linkA</router-link>  

append 的意思就是在当前的地址上追加

• 在程序中控制router的跳转

//在对应的执行地点,添加
this.router.push('/youWantThePathOfYouCompontent');


//带参数的情况,这个时候,必须要使用name
this.router.push({
    name:'noPossibleButSometimeIsUseful3',
    params:{
        name:'hello',
        age:20
    }
})

• 页面中有多个平级的那么就要使用命名视图了

<router-view name='header'></router-view>
<router-view name='content'></router-view>

这样的话,在vue-router-config.js中对应的组件配置要这么写:

{
    path:'/youPath',
    components:{
        header: headerComponent,
        content: contentComponent
    }
}

• 导航钩子
  主要用于在路由层次检查信息.如:登陆状态
  在main.js(应用的入口文件)中编辑

//路由跳转前执行
//三个参数,到哪里去,从哪里来,下一步做什么
router.beforeEach(function(to ,from ,next){

    next('/youContralPath');  //你控制的跳转
    next();//正常执行
})

//路由跳转后执行
router.afterEach(function(to ,from){

})