12. vue 路由（vue-router）

Vue 的路由(课件2019-01-09、参考：http://note.youdao.com/noteshare?id=143d6ea0b8fc25e0e45a008cefb3e7e5）

后端路由 -> 路由 -> （地址->/add / /2.html）

通过地址告诉后端要干什么。

后端路由的问题：

　　1.切换页面的时候是跳全局刷新页面（用户体验极差）

　　2.A页面的静态资源和B页面的静态资源会重复请求 这就是服务器渲染->SSR。

　　3.利于爬虫搜索（SEO优化），对服务器的压力大，建议用于首页渲染，别的还是走ajax

---

 前端路由：（vue的路由）

　　/ -> index

　　/2.html -> 2.html

通过不同的路由切换，干不同的事或者切换不同的页面

优势：

　　用户所有的操作都在一个页面完成，单页应用（spa）。 既然是一个页面，共享资源只需要请求一次即可

vue路由安装两种方式：

　　　　第一种：vue create app（自动配）

　　　　第二种：(自己配)

　　　　　　1)安装 npm install vue-router

　　　　　　2)引包：

　　　　　　　　　import Vue from 'vue'

　　　　　　　　　import VueRouter from 'vue-router'

　　　　　　3)使用 Vue.use(VueRouter)

　　　　　　4)配置路由 routers  把每一条路由组合起来，形参一个数组

const routes = [
  {
      path:'/home',
      component:Hw        //组件为 import引入的模板文件Hw
  },
  {
      path:'/a',
      component:a         //组件为 上面定义的组件a
  },
  {
      path:'/',
      redirect: '/hw'     //重定向：本来是访问 / 路径，此时重新指向‘/home’
  },
  {
      path:'/',
      redirect:to=>{
          console.log(to);    //从哪里来的路由对象，记录着上一次路由的信息  {...,path:'从哪里来的路径',...}
          return '/home'
      }
  },
  {
      path:'/',
      redirect:{
          name:'home'    //需要在此之前写一个路由记录（也就是一条路由），并且在里面定义name属性，在此时可以引用
      }
  },
  {
     path:'*',
     component:Error      //当输错地址的时候，跳转至Error.vue
  },
];
//创建路由对象，对路由进行管理，它是由构造函数 new VueRouter()创建
export default new Vuerouter({
  routes //key 和 value 都是 routers 可以简写成一个
});

内容有点多，不明白点进来看看

 

　　　　　　5)放到根下 （在 main.js 中引入、使用）

//1、引入router
import router from "../router/router";
//2.把 router 实例注入到 vue 的根实例中，就可以使用路由了
new Vue({
    el:'#app',
    render:()=>h,
    router
})

　　　　　　6)渲染 <router-view></router-view>

 

//router-link  用于点击跳转至某个路由，<router-link> 自动转成一个a标签
//router-view  路由匹配到的组件将显示在这里

<ul id="main">
      <li><router-link  to="/food" >商品</router-link></li>
      <li><router-link  to="/rating">评价</router-link></li>
      <li><router-link  to="/seller">商家</router-link></li>
</ul>

<router-view></router-view>

 

　　　　　　　　注意：

　　　　　　　　　　new Route({routes})  Route 是 vue-router

　　　　　　　　　　new Vue({router})

　　（hash路由-> #/... 不会刷新页面）

　　（history路由 /... 长的和后端路由一样的`前端路由`，同样不会刷新页面）

---

 

子路由：

　　如果有子路由，在原路由上挂一个children属性，children为一个数组，数组下又包一些对象，对象的path不要加 ' / '

{
    path:'/',
    component:app,
    children:[
        {
            path:'a',
            component:aaa
        }
    ]
}

　　有子级路由，那么记得在父级身上加上<router-view>< /router-view> 此时组件就会在父级的组件上显示。不管多少层都遵循这个规律。

　　解决激活状态切换时加不了事件的问题：使用.native

　　　　比如：@click.native="xxx(..)"

---

 　　如果要在刷新页面的时候通过路由的信息来操作数据，可以在created下使用this.$route这个的属性

　　this.$route 存着一些与路由相关的信息 常用的：

　　　　params  预设的变量  （动态路由会用到）

　　　　path      当前的路由的路径

　　　　query     查询信息 ？号

　　　　hash      hash信息 #号

---

 　　<router-link> 自动转成一个a标签

　　　　to=' / ' 放一个简单的字符串即可（to，就是去哪里的意思，里面放一个字符串的地址）

　　　　除了可以写成to，还可以是 :to

　　　　:to 的后面可以写成字符串 比如：

　　　　　　to='/a'

　　　　　　:to=" '/a' "

　　　　:to 可以是字符串，也可以是一个对象：

　　　　　　:to={path:'/a',query:{a:5}}"

　　　　　　:to="{name:'a',params:{a:5}}"

　　　　　　　　注意：如果使用params就不能定义path，要改为使用name（yinwei）

　　　　　　　　注意：路径前面一定要带 /，不然在配置路由的时候，地址会累加。

---

 编程式路由：(和html5 的 History有点像)

　　可以使用this.$router 身上的方法去任意切换路由 里面有几个方法：

　　　　push() 直接放入跳转的路径（路由）

　　　　　　比如：this.$router.push('/c')

　　　　go() 去第几个

　　　　　　比如：this.$router.go(-1)上一步 (+1)下一步

　　　　replace()把当前路径替换成什么

　　　　　　比如：this.$router.replace('/c')

---

动态路由：（常用于：页面结构一样，内容不一样的时候。比如商品详情页，只是商品id不同）

　　动态路由路径参数以冒号开头

　　比如：path:'/:xxx' 意思是：

　　　　只要是根下的任意路径都能匹配到，通过 $route.params.xxx 获取

const routes = [
    {
        path:'/about/:num',
        component:about
    }
]

<template>
    <ul>
        <li v-for="(val,key) in obj[$route.params.num]">{{val}}</li>
    </ul>
</template>

export default{
    data(){
        return{
            obj:{
                a:[1,2,3],
                b:[4,5,6],
                c:[7,8,9]
            }
        }
    }
}

//localhost:8080/about/a            1 2 3
//localhost:8080/about/b            4 5 6
//localhost:8080/about/c            7 8 9

动态路由-例子

---

嵌套路由：　

　　就是加children　

比如：　

export default new Router({
  mode: 'history', //注销后变成hash路由
  linkExactActiveClass:'seractive',//点子路由后，父路由依然有样式
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component:About
    },
    {
      path: '/secant',
      name:'Secant',
      component:Secant,
      children:[   //嵌套的子路由
        {
          path:'a',
          name:'aaa',
          component:A
        },
        {
          path:'b',
          name:'bbb',
          component:B
        },
        {
          path:'c',
          component:C
        }
      ]
    },
  ]
})

嵌套路由

---

 重定向：

　　redirect  后面可以放路径。也可以是对象。还可以是通过：to 来获取、判断、处理，并返回一个重定向的路径或路径对象。

　　比如：

　　　　{path:'/a',redirect:'/xxx'}  //当访问某一个路径的时候跳转到另一个路径

　　　　{path:'/a',redirect:{name:'xxx'}}  //可以通过 name 去指定一个组件

　　　　{path:'/a',redirect:to=>{ 

　　　　　　　console.log(to)

　　　　　　　 return '/xxx'

　　　　　　　 //to  获取一个对象，记录了上一次路由的信息（常用：params、query、hash、path.....）

　　　　　　　 //return  重定向的 字符串路径或路径对象

　　　　} } 

 {
        path:'/',
        component:组件
    },

转载于:https://www.cnblogs.com/MrZhujl/p/10246836.html