vue的路由器配置

vue的路由器配置

1.安装vue-router

npm i vue-router

2.搭建vue-router环境

（1）. 将vue-router注册为vue的插件

router/touter.js:

   import VueRouter from "vue-router";
   Vue.use(VueRouter)

（2）. 创建路由组件 并 进行路径映射

a.创建pages目录，在里面创建对应的路由

b.routers/routers.js:

import about from "../pages/about"
import home from "../pages/home"
const routes = [
  {path:"/about",component:about},
  {path:"/home",component:home}
]
export default routes

（3）. 创建路由器 并 注册路由

router/touter.js:

const router = new VueRouter({
  routes
})
export default router

（4）. 注册路由器

在入口文件main.js中：

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router
})

（5）. 路由组件的占位

app中：

<template>
  <div id="app">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Basic</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div data-v-957c9522="" class="col-xs-6">
          <div data-v-957c9522="" class="panel">
            <div data-v-957c9522="" class="panel-body">
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

（6）. 设计路由导航

<template>
  <div id="app">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Basic</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div data-v-957c9522="" class="col-xs-6">
          <div data-v-957c9522="" class="panel">
            <div data-v-957c9522="" class="panel-body">
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

3.搭建vue-router环境(分模块)

pages : 存放路由组件
routes : 路由
router : 路由器

4.重定向

routers/routers.js:

const routes = [
  {path:"/about",component:about},
  {path:"/home",component:home},
  {path:"/",redirect:"/about"}
]

5.嵌套路由

弄清楚路由组件到底在哪渲染;一级路由组件在app的router-view上渲染
二三…级路由组件在其上一级的路由组件中的router-view上进行渲染

import about from "../pages/about"
import home from "../pages/home"
import news from "../pages/news"
import message from "../pages/message"
const routes = [
  //普通路由
  {path:"/about",component:about},
  //嵌套路由
  {
    path:"/home",
    component:home,
    children:[
      {path:"news",component:news},
      {path:"message",component:message},
      {path:"",redirect:"news"},
    ]
  },
  {path:"/",redirect:"/about"}
]
export default routes

6.动态路由

a.基本配置 & 基本使用
b.如何获取动态路由的相关信息;通过$route来获取
c.当同一个动态路由产生切换时;对应的路由组件的生命周期得不到执行;我们需要手动的监听$route

//about,home,user是一级路由
//news和message是home的二级路由
import about from "../pages/about"
import home from "../pages/home"
import news from "../pages/news"
import message from "../pages/message"
import user from "../pages/user"
import userDeatil from "../pages/userDeatil"
const routes = [
  // 普通路由
  {path:"/about",component:about},
  // 嵌套路由
  {
    path:"/home",
    component:home,
    children:[
      {path:"news",component:news},
      {path:"message",component:message},
      {path:"",redirect:"news"},
    ]
  },
  //基本动态路由：
  **
  userDeatil是user的子路由，userDeatil是动态路由。
  不管id为多少，都可以打中同一个路由，就是userDeatil子动态路由
  **
  //动态路由  ?代表:id可以被匹配0到1次
  // {path:"/user/:id?",component:user},
  {
    path:"/user",
    component:user,
    children:[
      {path:":id",component:userDeatil}
    ]
  },
  {path:"/",redirect:"/about"}
]
export default routes

**
在user一级路由中注册并定义方法根据id去打中userDeatil子路由，
根据v-model去抓取id,  data中接受id，在methods定义方法去打中
这个子路由进行路由跳转。
    methods:{
          go(){
            //进行路由跳转
            this.$router.push(`/user/${this.id}`)
          }
        }
**

//深入动态路由：

//about,home,user，test是一级路由
//news和message是home的二级路由
//userDeatil是三级路由

import about from "../pages/about"
import home from "../pages/home"
import news from "../pages/news"
import message from "../pages/message"
import user from "../pages/user"
import userDeatil from "../pages/userDeatil"
import test from "../pages/test"
const routes = [
  // 普通路由
  {path:"/about",component:about},
  // 嵌套路由
  {
    path:"/home",
    component:home,
    children:[
      {path:"news",component:news},
      {path:"message",component:message},
      {path:"",redirect:"news"},
    ]
  },
  //动态路由  ?代表:id可以被匹配0到1次
  {path:"/test/:id?",component:test},
  {
    path:"/user",
    component:user,
    children:[
      {name:"user",path:":id",component:userDeatil}
    ]
  },
  {path:"/",redirect:"/about"}
]
export default routes


**
在user一级路由中注册并定义方法根据id去打中userDeatil子路由，
根据v-model去抓取id,  data中接受id，在methods定义方法去打中
这个子路由进行编程式路由跳转。

        methods:{
          go(){
            //进行编程式路由跳转(字符串的形式)
            // this.$router.push(`/user/${this.id}?name=damu&age=18#888`)

            // 进行编程式路由跳转(对象的形式)
            /*this.$router.push({
              path:`/user/${this.id}`,
              query:{
                name:"damu666",
                age:188
              },
              hash:"#678"
            })*/

            //进行编程式路由跳转(对象的形式) path和params不能同时出现
            //如果同时出现则使用命名路由name
            this.$router.push({
              // path:`/user`,
              name:"user",
              params:{
                id:this.id
              },
              query:{
                name:"damu666",
                age:188
              },
              hash:"#678"
            })
          }
        }
**

补充：

     // {
          //    fullpath:"",   path+query+hash
          //    hash:"",
          //    params:{搜集冒号后面的值 在此处是id}      path中:对应的数据
          //    query:{}
          //    path:"",  在此处为/user/${this.id}
          // }

7.编程式导航 vs 声明式导航

声明式导航 : <router-link to="path">
编程式导航 :
        $router.push(路径字符串)
        $router.push(对象)
            {path:路径字符串}
            {
                path:路径字符串.path,
                query:路径字符串.query,
                hash:路径字符串.hash
            }
            {
                name:命名路由的名称, //在配置路由时一定要给对应的路由起名字
                params:路径字符串.params,
                query:路径字符串.query,
                hash:路径字符串.hash
            }

8.路由配置

name:命名路由;字符串
path:匹配路径;字符串
component:路由组件;组件对象
children:子路由配置;子路由配置组成的数组
props:布尔值 对象 函数
redirect:路径字符串

解耦
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦：

import about from "../pages/about"
import home from "../pages/home"
import news from "../pages/news"
import message from "../pages/message"
import user from "../pages/user"
import userDeatil from "../pages/userDeatil"
import test from "../pages/test"
const routes = [
  // 普通路由
  {path:"/about",component:about},
  // 嵌套路由
  {
    path:"/home",
    component:home,
    children:[
      {path:"news",component:news},
      {path:"message",component:message},
      {path:"",redirect:"news"},
    ]
  },
  //动态路由  ?代表:id可以被匹配0到1次
  //props:true  代表我们将:id对应的数据自动通过props的形式传递给test组件

  // {path:"/test/:id?",component:test,props: true },布尔模式
  **如果 props 被设置为 true，route.params 将会被设置为组件属性。类似于父组件通过props进行数据传递**
  
  // {path:"/test/:id?",component:test,props: {a:"a",b:"b"} }, 对象模式
**如果 props 是一个对象，它会被按原样设置为组件属性。**

  {path:"/test/:id?",component:test,props: route => ({
                                                id:route.params.id,
                                                name:route.query.name,
                                                age:route.hash.split("#")[1]
                                            }) },函数模式
 **你可以创建一个函数返回 props。函数的参数是当前route对象**
                                            
  {
    path:"/user",
    component:user,
    children:[
      {name:"user",path:":id",component:userDeatil }
    ]
  },
  {path:"/",redirect:"/about"}
]
export default routes

//哪个组件需要就传参到哪个组件中
<template>
    <div>test {{id}} - {{name}} -{{age}}</div>
</template>

<script>
    export default {
        name: "test",
        props:["id","name","age"]
    }
</script>

9.路由器配置

routes: 注册路由
mode
类型: string
默认值: “hash” (浏览器环境)
可选值: “hash” | “history”
配置路由模式:
hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。//端口号与path之间有一个#号 刷新页面不会丢失静态资源中的css样式
history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。 //刷新页面会丢失静态资源中的css样式。解决方案：将index.html中样式引入的路径改为绝对路径

linkActiveClass
类型: string
默认值: “router-link-active”
全局配置 的默认“激活 class 类名”。

linkExactActiveClass
类型: string
默认值: “router-link-exact-active”
全局配置 精确激活的默认的 class。