Vue Router

前端中的路由

路由的基本使用

在 vue 的作用域中

注意: 使用别名一定要加 :

<!--路由的入口  就是一个 a 标签-->
<router-link to='/home'>主页</router-link>

<!--入口使用  别名 -->
<router-link :to='{name:'home'}'>主页</router-link>

<!--路由的出口--> 
<router-view></router-view>

<!--可以使用单闭合标签-->
<router-view/>

在 script 中

// 导入  vue  以及 vue-router
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

let Home={
    template:`<h1>Home 主页</h1>`
}

let router = new VueRouter({
    // mode: 'history',    // 此方法 是不显示地址栏中的井号
    routes:[
        // {path:'路由地址', name:'别名', redirect:'重定向 写 路由的Url'},
        {path:'/home', name:'home', component: Home},  // component 返回的组件
    ]
})
new Vue({
    el:'#app',
    //挂载路由  Es6 写法相当于  router: router
	router ，
    
})

路由对象以及信息

//  $  相当于 vue 内部的变量实例

new Vue({
    el:'#app',
    //挂载路由  Es6 写法相当于  router: router
    router ,
    // 钩子函数  挂载完 DOM 之后 运行
    mounted(){
        console.log(this.$router)  // app 的路由对象
        console.log(this.$route)   // 当前路由的对象   
    },
    //监听属性  
    watch:{
		// 监听每一次路由切换之后的当前路由信息
        '$route': function(to, from){
            console.log(to);  // 要切换到的路由信息
            console.log(from);  // 切换前的路由信息
            // ajax 请求数据
            console.log(this.data.courseList)
        }
} ,
});

vue-cli 中监听路由动向

// 写在路由的 router 中
		// scroll Behavior  滚动行为
...   	 //  saved Position   保存的位置
scrollBehavior(to, from, savedPosition) {
    // to 是将要跳转到的页面  from 是从哪里跳转的
    console.log(to,from,111111111111);
    if (savedPosition) {
        // console.log(savedPosition);
        return savedPosition
    } else {
        //点击 页面中 的上一页 下一页 触发  {x: 0, y: 0} 会显示在控制台中
        return {x: 0, y: 0}
    }
}
...

路由的动态匹配

在路入口中的传递参数

入口中定义 params 可传递多个参数

<router-link :to="{name: 'index', params:{id: 10}}">index</router-link>

定义 query 传递参数: 刷新不会丢失数据

<router-link :to="{name: 'index', query:{id: 10}}">index</router-link>

路由中接收参数

{path:'/index:id', name:'index',component: Index}

在组件中使用参数

template:
`<div>
{{ this.$route.params.id }}  通过路由中的  /user/:id  params 对象获取
{{ this.$route.query.key }}  通过地址栏中传递的对象 来获取
</div>`

嵌套路由

在一级路由中定义 children:[...]

let router = new Router({
    routes: [
    {
      path: '/user/',  // 匹配URL路径的
      name: 'user',  // 路由别名
      children: [
            {path: 'info', name: 'user-info', component: UserInfo},  // 匹配 /users/info
            {path: 'posts', name: 'user-posts', component: UserPosts},  // 匹配 /user/posts
        ]
    },
        ...
    ]
 })

编程式导航（代码模式）和声明式导航（a标签模式）

编程试导航就是用代码来跳转到指定的页面

之前用的试声明试 a标签

通过点击事件给全局的 $router 推入一个路由

<template>
  <div class="about">
    <button @click="goHome">点我返回主页</button>
  </div>
</template>

<script>
    export default {
        name: 'About',
        methods: {
            goHome(){
                // 通过代码跳转到 home
                this.$router.push({name: 'home'})
            }
        }
    }
</script>

Vue Router

Vue Router

路由的基本使用

路由对象 以及信息

路由的 动态匹配

嵌套路由

编程式导航（代码模式）和声明式导航（a标签模式）

推荐阅读

路由对象以及信息

路由的动态匹配