11vue-路由

Posted 2020-12-11 taozhibin

1、路由：
官方提供一个插件，构建单页面应用，主要实现得功能页面得切换、组件得跳转

2、vue中得路由：vue-router包，如果是脚手架进行搭建得，那么是不需要安装vue-router这个包得，因为里边已经配置安装好了

3、scr中得router文件中的index.js就是直接放路由得文件，所有的路由配置全部都是再这个文件中进行配置的，用的话实在组件中进行使用的

4、不管是使用组件也好，还是使用路由也好，都是需要创建一个组件或者是路由实例的
都需要使用new来完成
import Router from ‘vue-router‘ //引入路由构造器
Vue.use(Router)
export default new Router() //路由实例

5、路由的原理：
根据url的路径变化，从而获取显示对应的组件
通过改变url，再不更新页面的情况下，更新页面中视图

6、vue中的路由实现：
hash模式：根据的是#后的值进行判断的，再读取的时候使用的是window.location.hash进行读取的
特点：hash是再url中的，但是不被包含在http的请求中，hash不会重新加载页面
http://www.xxx.com/#/test（默认是hash模式的）
history模式：把#去掉了，直接再后边显示的是/，再请求的时候是一起进行请求的，但是一般如果要使用的是history模式，那么必要要保证前端
URL和向后台发起的URL一致才行，只有再这种情况下才能请求到数据，否则返回的是404：http://www.xxx.com/test
mode：‘history‘(有的浏览器是不支持的)

7、使用路由步骤：
现在router配置文件中进行配置
然后再在入口文件中引入路由，其他组件才能使用
使用router-link-->a标签
to：跳转得路径，和path中定义的内容是一致的
name进行跳转，{name:‘‘}
使用router-view标签给vue组件提供跳转的容器

8、如果有二级路由的话：
需要使用children在index.js文件中进行配置的

9、子路由在哪个路径下边，那么我们就需要把router-view放在哪个组件中，否则的话这个子路由是没有办法显示出来的

10、命名视图
一个路由显示多个组件：
components，同时告诉浏览器，哪个组件显示在哪个view中，使用的是name属性来实现的

 

案例：

// index.js -router


import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@/components/Home‘
import About from ‘@/components/About‘
import Nava from ‘@/components/nava‘
import Product from ‘@/components/product‘
import Footer from ‘@/components/Footera‘
import Contenta from ‘@/components/contenta‘
Vue.use(Router)

export default new Router({
  mode: ‘history‘,
  routes: [
    {
      path: ‘/‘,
      name: ‘Home‘,
      components: {
        default:Home,
        contenta:Contenta,   //命名视图
        footer:Footer   
      }
    },    {
      path: ‘/about‘,
      name: ‘About‘,
      component: About,
      children:[                  //子组件路由
        {
          path:‘/about/nava‘,
          name:"nava",
          component:Nava
        },{
          path:‘/about/product‘,
          name:"product",
          component:Product
        }
      ]
    }
  ]
})

 

这是App父页面
<template>
  <div id=‘app‘>
      <ul>
         <!-- <li><router-link to="/">首页</router-link></li>
         <li><router-link to="/about">abuot</router-link></li> -->      //第一种方法
       
            <li><router-link :to="{name:‘Home‘}">首页</router-link></li>     //第二种 ：to=“｛｝”
         <li v-navDown><router-link :to="{name:‘About‘}">abuot</router-link>
            <ul>
            <li>
                <router-link to="/about/nava">NAva</router-link>              // 子路由
            </li>
            <li> <router-link to="/about/product">公司产品</router-link></li>   //子路由
          </ul>      
         </li>
      </ul>
        <router-view name="default"></router-view>    //命名视图
        <router-view name="contenta"></router-view> 
         <router-view name="footer"></router-view> 

  </div>
</template>

<script>
import $ from ‘jquery‘
export default {
  name: ‘App‘,
  data () {
    return {
     
    }
  },
  directives:{
    ‘navDown‘:{
       inserted (el) {
          el.addEventListener(‘mouseenter‘,function(){
                  $(el).children(‘ul‘).slideDown()
          })
                  el.addEventListener(‘mouseleave‘,function(){
                  $(el).children(‘ul‘).slideUp()
          })
       }
    }
  }
  
  
}

</script>

<style>
.test{
  color:skyblue;
}
li{
  width: 500px;
  height: 20px;
  background: pink;
}
li ul{
  display: none;
}
</style>

//显示子页面
<template>
    <div>我是about
        <router-view></router-view>   //直接显示子页面
    </div>
</template>