Vue路由创建与配置

创建路由

1. 创建路由组件(组件配置对象，不需要注册)

2. 创建路由配置

const routes = [
          {
              path: '路由地址'，
              component: 路由组件
          }
        ]

3.创建路由对象

const router = new VueRouter({
            routes,
            // 还可以写其他的配置
          })

4. 将router 放入Vue实例配置中

const app = new Vue({
            router
          })

配置路由

const routes = [
      {
        //一个对象就是一个路由配置
        path: '/',这个就表示当访问/ 时就会将 component 中对应的组件显示在页面中的router-view里
        component: 组件名
      }
    ]

动态路由配置

{
        path: '/demo/:xxx', // 这个xxx就是对应未来的参数名
        //该路由可以匹配到 /demo/任意内容 这样的路由
      }

路由给组件传值的方式

1. 动态路由传值

 先设置动态路由
       {
         path: '/demo/:id'
       }
     在对应的组件中，可以通过$route.params.id 获取到对应的值

2. url 参数传值

   在url中填入对应的参数
    www.xxx. com/?参数名=值&参数名2=值2
   在对应的组件中，可以通过$route.query.参数名 

/*
    http://xxx.xxx.com#/?a=1&b=2
    那么在当前路由对应的组件中，我们可以通过
    $route.query.a获取到a的值
    $route.query.b获取到b的值
  */

获取到对应的值根据传递的值请求对应的数据，有时候会因为路由改变，但组件没变，导致created 只能执行一次，因此在路由组件中并不适合created获取数据，
有些需要接受值并请求数据的路由组件，可以在watch监听$route的变化并设置对应的data中的值

watch: {
         '$route': {
           handler (to) {
             //to就是最新的路由对象
             通过to 可以获取到params获取query中的参数再根据参数，可以请求数据并直接替换data中的数据
           },
           immediate:true  //加这个目的是让页面刷新先执行一次上面的函数
         }
       }

     router-link
       to='路由地址'
       tag= "" 如果需要将router-link渲染成其他标签，我们可以使用 tag="标签名"
       router-link渲染的链接如果刚好和当前的路由地址相同，router-link渲染标签上会有激活类名
       
       当我们想要改变路由地址后，改变页面中某部分的内容，那么那个部分一定是router-view