Vue中路由的使用

官网地址

1 .什么是路由

• 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
• 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
  在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

2.路由的使用

1. 引入js文件
   需放在Vue的js后面
   <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2. 创建路由
   new VueRouter(),接受的参数是一个对象
3. 在实例化的对象里配置属性 routes :[]
   这个数组里的对象包含path属性和component属性
   path属性是url的地址
   component属性就是显示的组件（传组件的对象）

 const router = new VueRouter({
            routes:[{
                path:'/login',          // 地址
                component:lo  //传组件对象
            },
            {
                path:'/registry',          // 地址
                component:re 
            } ]
        })

4. 创建的路由需要和vue实例关联一下
   var vm = new Vue({ el:"#app", // 把路由挂载到实例上 router : router, })
5. 路由到的组件显示在哪个位置

<div id="app">
<router-view></router-view>
</div>

6. 路由重定向
   redirect可以进行路由的重定向

{
       path:'/',          
      // 通过这种方式，在访问/路径的时候会重定向到/login路径
       redirect:'/login'
            }

7. 选中路由高亮(激活样式)

• 使用默认的样式
  直接设置router-link-active
  例如.router-link-active{ background-color: pink; font-size: 20px }
• 自定义样式
  配置 linkActiveClass:'自定义的类名',写在路由实例化中

3.路由中定义参数

• 通过query的方式在地址后加?参数名=参数的值
  获取参数：$route.query.参数名
  例如

	//定义
 <router-link to="/detail?id=999">某新闻</router-link>
 //获取
  {
  path:'/detail',
 	component:newDetail
    },

• 使用浏览器参数的方式传递参数
  设置路由的时候/路由地址/:参数名
  获取参数$route.params.参数名
  例如

//定义
 <router-link to="/detail2/1000">新闻</router-link>
 //获取
 {
  path:'/detail2/:id',
	component:newDetail2
   }

后者必须有参数，前者可没有

4.路由中组件的嵌套

声明路由的时候设置children,children是一个数组，数组里是路由对象
这个children的组件就会渲染在它父组件的<router-view>中

{		path:'/parent',
        component:parentCom,
                 // 涉及到了子路由的内容
      children:[{
                     // 这就是用相对路径，相对于父组件的，这个实际路径就是/parent/login
        path:'login',
        component:lo
                    }]
            }

5.路由的跳转

• 传统跳转方式
  router-link标签可以设置to属性
  默认是a标签，可以通过tag设置包裹标签
  <router-link to='/login'>登录</router-link>
• 通过对象的方式跳转
  router-link的to属性不止可以写一个字符串也可以写一个对象
  通过对象跳转需要使用属性绑定
  {path:'路由的地址',query:{参数名字:参数的值}(通过？的方式传参数)}
• 定义路由的name，使用name方式跳转
  声明路由的时候给路由加一个name，这个name就指代了这个路由
  {name:'路由的名字',query:{参数名字:参数的值},params:{变量名字:变量的值}(如果这个路由有url参数的时候需要加上这个属性，给url参数赋值)}
• 函数式跳转
  $router.push() 和router-link的to属性的内容是一致的 // 路由的跳转
  $router.go(-1)页面的返回 参数定义返回多少级

6.使用路由命名视图

我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
使用components属性设置
给router-view设置名字，这个名字和components组件名字是对应的
设置默认值default对应组件可以设置名字也可以访问

<div id="app">
        <!-- router-view可以设置名字，指定渲染的组件 -->
        <router-view name="header"></router-view>
        <div class="box">
            <router-view name="sidebar"></router-view>
            <router-view name="main"></router-view>
        </div>
    </div>
    <script>
        // 头部
        const header = {
            template:'<div class="header">头部</div>'
        }
        // 侧边栏
        const sidebar = {
            template:'<div class="sidebar">侧边栏</div>'
        }
        // 主体内容
        const main = {
            template:'<div class="main">内容</div>'
        }
        // 实例化一个路由
        const router = new VueRouter({
            routes:[{
                path:'/',
                components:{
                    header,
                    sidebar,
                    main
                }
            }]
        })
        var vm = new Vue({
            el:"#app",
            // 把路由挂载到实例上
            router : router
        })
    </script>

7. 路由元数据

1. 路由元数据就是路由上定义的一些信息
2. 在切换路由的时候可以传递一些信息
3. 如何使用？
   在路由上添加一个meta属性，这个属性是个对象，在对象内，可以定义一些变量
   $route.meta就可以拿到这个对象
   例如

 {
     path: 'Search',
     component: Search,
      meta: {
              title: '搜索'
    }
 },