vue路由

vue路由

首先Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是通过超链接来实现页面的切换和跳转。在Vue-router中是路径之间的切换，也就是组件的切换。

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转。

路由配置

搭建框架

//配置路由相关信息
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//1. 通过vue.use安装插件
Vue.use(Router)
//2. 创建vuerouter对象
export default new Router({//3. 将router对象传入到vue实例中
  //配置路由和组件之间的映射关系
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

配置路由的映射关系

• 创建路由组件
• 配置路由映射：组件和路径映射关系
• 使用路由：通过router-link和router-view

router-link是vue-router已经内置的组件，会被渲染成为a标签
router-view会根据当前的路径，动态渲染出不同的组件
router-link属性

• to属性：用于指定跳转的路径。

• tag属性，可以指定router-link之后渲染成什么组件。

• replace属性，replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中，直接填入属性即可使用。

• active-class属性，当router-link对应的路由匹配成功时，会自动给元素设置一个router-link-active的class，设置active-class可以修改默认的名称，active-class=“active”。当修改过多时，在index.js文件进行修改。

路由的默认路径

默认情况下，进入网站的首页，我们希望router-view渲染首页的内容，但是目前的操作需要用户点击才可以
解决办法：
多配置一个映射，重定向

{
      path:'',//path:'/' 也可以
      redirect: '/home'
    },

上述操作中url均带#，属于hash模式，使用history模式去掉#

 mode: 'history'

通过代码跳转路由

<template>
  <div id="app">
    <h3>我是最大的APP</h3>
    <button @click='homeclick()'>首页</button>
    <button @click='testclick()'>测试</button>
    <router-view></router-view>
    
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    homeclick(){
      //this.$router.push('/home');
      this.$router.replace('/home');
    },
    testclick(){
      //this.$router.push('/test');
      this.$router.replace('/test');
    }
  }
}
</script>
<style>
  .active{
    color: red;
  }
</style>

动态路由

静态添加用户

 	<router-link to="/home">首页</router-link>
    <router-link to="/test">测试</router-link>
    <router-link to="/user/lili">用户</router-link>
    <router-view></router-view>

动态添加用户

	<router-link to="/home">首页</router-link>
    <router-link to="/test">测试</router-link>
    <router-link :to="'/user/'+ id">用户</router-link>
    <router-view></router-view>

router 是一个路由导航对象，用它可以方便的使用JS代码实现编程式路由导航，例如页面的前进、后退、跳转等
route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

路由的嵌套

1. 创建对应的子组件，并且在路由映射中配置对应的子路由
2. 在组件内部使用router-view标签

{
      path:'/home',
      name:'home',
      component: home,
      children:[
        {
          path:'film',
          component:film
        },
        {
          path:'cinema',
          component:cinema 
        }
      ]
    }