Vue路由的使用

一、什么是路由

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

二、路由的基本使用

1、先引入js文件，这个js文件需要放到vue的js后面，自动安装（提供一个VueRouter的构造方法）；
2、创建一个路由实例；
3、创建映射关系；
4、挂载到vue实例上；
5、创建的路由需要和vue实例关联一下
6、路由的组件显示在哪个位置（）

三、路由跳转

1、router-link标签可以设置to属性；
2、默认是a标签，可以通过tag设置包裹标签；

 <router-link to="/detail">详情页</router-link>
        <router-link :to="{path:'detail',query:{coureId:103,name:'dasdasd'}}">前往详情</router-link>

路由重定向

redirect可以进行路由的重定向

 // 路由重定向
                {
                    path: '/',
                    redirect: '/index',
                },

选中路由高亮

1、使用默认样式
直接设置 router-link - active
2、自定义样式
配置linkActiveClass："自定义类名“，

定义参数

1、
body区域：

   <router-link :to="{path:'detail',query:{coureId:103,name:'dasdasd'}}">前往详情</router-link>

script区域：
router实例里的：

 {
                    path: '/detail',
                    component: detail
                },

2、使用浏览器参数的方式传递参数

• 1、设置路由的时候/路由地址/：参数名
• 2、获取参数$router.params.参数名
  body区域：

<router-link :to="{name:'/my',params:{urlId:111,name:'dasd'} }">个人中心</router-link>

script区域：
router实例区域：

  {
                    path: '/mine/:urlId',
                    component: mine,
                    name: '/my'
                },

组件嵌套

1.声明路由的时候设置children,这是children是一个数组，数组里是路由对象
2.这个children的组件就会渲染在它父组件的中

  // 路由嵌套  children:[{}]后面是一个数组，数组里面是一个对象
                    children: [
                        {
                            // 路径后面不能跟/  '/'是根目录的意思，用了之后会覆盖根标签
                            path: 'mine',
                            component: mine
                        }
                    ]

命名视图

1.我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
2.components属性设置的
3.给router-view设置名字，这个名字和components组件名字是对应的
4.设置默认值default对应组件可以设置名字也可以访问
body区域：

 <router-view name="mine"></router-view>

script区域：
router区域：

  {
                    path: '/detail',
                    // 命名视图
                    components: {
                        default: detail,
                        mine,
                    },
         
                },