vue-router知识点

1. 路由的概念

  通过改变 URL，在不重新请求页面的情况下，更新页面视图。
2. vue-router 两种路由模式

  更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现

•   Hash — 默认值，利用 URL 中的hash("#")
•   history-- 利用URL中的路径（/home）

3. 如何设置路由模式

const router=new VueRouter({
    mode:'history',
    routes:[...]
})

    mode 区别：

   (1)    mode:“hash” 多了 “#”

http://localhost:8080/#/login

   (2)    mode:“history”

http://localhost:8080/home

4. HashHistory

hash("#")的作用是加载 URL 中指示网页中的位置。# 号后面的 hash值，可通过 window.location.hash 获取

特点：

• hash 不会被包括在 http 请求中，，对服务器端完全无用，因此，改变 hash 不会重新加载页面。
• 可以为 hash 的改变添加监听事件：window.addEventListener("hashchange",funcRef,false)
• 每一次改变 hash(window.localtion.hash)，都会在浏览器访问历史中增加一个记录。
• 利用 hash 的以上特点，就可以来实现前端路由"更新视图但不重新请求页面"的功能了。

HashHistory 拥有两个方法，一个是 push， 一个是 replace

两个方法：HashHistory.push() 和 HashHistory.replace()

5. 声明式、编程式导航？

   可以使用<router-link> 组件，<router-link> 组件通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签；如果不想渲染成<a> 标签，可以使用 tag 属性来指定要渲染的元素；

//跳转到home路由，渲染成li
<router-link to="home" tag="li"></router-link>

  那么这一种是属于组件的写法，写在模板中的；跳转的地址及其他的属性只能在模板中的组件里去控制，显然满足不了我们日常开发的要求，我们需要能够用JS来控制的路由方法

  当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

 

router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

还有另外一种跳转

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

6.Vue路由配置

  (1) 安装

 npm install vue-router --save

   (2) 创建router.js文件，在该文件中配置路由并暴露出去

 import Vue from 'vue';
  //Vue路由：引入
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

    //Vue路由：引入并创建组件
    import BYHome from '../BYHome.vue'
    import BYNews from '../BYNews.vue'
    import HelloWorld from '../HelloWorld.vue'

    //Vue路由：配置路由
    const routes = [
      {path: '/home', component: BYHome},
      {path: '/news', component: BYNews},
      {path: '/helloworld', component: HelloWorld},
      {path: '*', redirect: '/home'} /*默认跳转路由 */
    ]

    //Vue路由：实例化VueRouter 
    const router = new VueRouter({
      routes //缩写，相当于 routes:routes
    })
    //Vue路由：需要在App.vue 中配置路由出口：路由匹配到的组件将渲染在根组件App.vue中
    /* <router-view></router-view> */


    //暴露出去
    export default router;

（3）.在main.js中

//Vue路由：引入路由文件
import router from ‘./components/jsTool/router.js’

new Vue({
router, //Vue路由：挂载路由
render: h => h(App),
}).$mount(’#app’)

7. Vue路由：

根组件的模板里面放上下面这句话，需要在App.vue 中配置路由出口：路由匹配到的组件将渲染在根组件App.vue中

<router-view></router-view>

8.路由跳转

<router-link to="/home">首页</router-link>  
<router-link to="/news">新闻</router-link>
<router-link to="/helloworld">helloWorld</router-link>

 9.路由动态传参

1.获取路由的get传值

   路由配置

import BYHomeDetail from '../BYHomeDetail.vue'
{path: '/homeDetail', component:BYHomeDetail},
//跳转时跟get参数
<li li v-for="(listItem,homeKey) in msglist">
            <router-link :to="'/homeDetail?id='+homeKey"> {{listItem.title}} </router-link>
 </li>
 //子页面获取路由的get传值
  mounted(){
    console.log(this.$route.query);
}

动态路由传值

//路由配置：带形参
import BYNewDetail from '../BYNewDetail.vue'
{path: '/newDetail/:aid', component: BYNewDetail}, 
//跳转时传值
<li v-for="(item,key) in list">
    <!-- 给 newDetail 传值 -->
    <router-link :to="'/newDetail/'+key">{{key}}--{{item}}</router-link>
</li>
//子页面获取动态路由传值
 mounted(){
    console.log(this.$route.params);
}

• 主要通过 query 和 params 来实现
• query 传参：通过在 router-link 或this.$router.push()传递 通过 this.$route.query.id 来接收
• 优点：通用性比较好，刷新数据不会丢失  query相当于get请求，在页面跳转的时候，可以在地址栏看到请求参数，
• params 传参：通过在 router-link 或 this.$router.push()传递 ，通过 this.$route.params.id来接收
• 优点：传递数据量在，优雅   
• 缺点：params则相当于post请求，参数不会在地址栏中显示。

10.路由的跳转方式：

第一种跳转方式:编程式导航

{path: '/news', component: BYNews},
this.$router.push({path:'news'});
带参：
{path: '/newDetail/:aid', component: BYNewDetail},
this.$router.push({path:'/newDetail/495'});

第二种跳转方式：命名路由

{path: '/news', component: BYNews,name:'news'},
    this.$router.push({name:'news'});
    带参：
    this.$router.push({name:'news',params:{userId:123}});