vue之路由(基础)

一、路由的作用是什么？
通过它可以进行视图的切换，比如tab切换

二、vue路由中涉及到的一些属性(部分)
active-class : 激活样式设置，可以自定义一个css样式，如 active-class=“test”
to: 指定路由的名称 如：to=’/position/index’
tag: 指定router-link最终解析的样式，默认解析成超链接（a标签）如：tag=‘li’
exact：精确匹配路径，如果遇到诸如下面这种情况就需要精确匹配。（它不会印影响具体的业务功能，但是会影响激活状态 active-class）

routes:[
	 {
     	path:"/",
     	redirect:"index"
 	},
 	{
    	path:'/pp/name/:name/age/:age',
    	component:pp
	}
]

path：路径
redirect：重定向的地址

三、路由的几种形式

1 常规写法：（入门级）

//创建路由导航和路由显示区域
<div id="app">
    <ul>
        <!-- 使用router-link来导航 它默认会被渲染成一个a标签
        <router-link to='/music' active-class='active'>音乐<
        <router-link to='/sport'  active-class='active'>体育
    </ul>
    <!-- 视图呈现区域  平级，谁离他近就呈现对应的内容 -->
    <router-view></router-view>
</div>
 // 创建VueRouter实例
 var router = new VueRouter({
     // 路由模式  模式hash
     mode:"hash",
     // 定义路由，可以多个，它是一个数组嘛
     routes:[
         {
             // 路径，这里可以是相对的也可以是绝
             path:'/music',
             // 映射一个组件
             component:{
                 // 模板 这里是路由对象的内容，
                 template:`
                     <div>this is music</div>
                 `
             }
         },
         {
             path:'/sport',
             component:{
                 template:`
                     <div>this is sport</div>
                 `
             }
         }
     ]
 })
 //创建vue实例
 var vm = new Vue({
     //这里注意 一定要将router实例添加到vue实例中，也叫挂载根实例,从而让整个应用都有路由的功能（vue官方文档说法）
     router,
     el:"#app",
 })

效果展示：

2 动态路由的形式：
简单来说就是在路径后面添加一些动态的内容，比如id

//在路径后面添加一些动态的内容
  <router-link to='/home/88'  active-class='active'>home</router-link>
// 定义一条动态路由
 {
     path:'/home/:id',
     component:{
         template:`
         // 通过$route.params.id获取
             <div>home--{{$route.params.id}}</div>
         `
     }
 }

效果图：可以看到动态路由后面的动态内容已经取到了

3、嵌套路由

就是在已定义的一条路由的模板template中又嵌套了多个路由导航，实现多久导航的效果。个人觉得嵌套路由对于做多级导航效果很有帮助

//对sport路由进行重新定义，用到children关键字
{
    path:'/sport',
    component:sports,
    // 下面可以定义多条嵌套的路由
    children:[
            {
                path:'/sport/be',
                component:{
                    template:`
                        <div>sport-be</div>
                    `
                }
            },
            {
                path:'/sport/fe',
                component:{
                    template:`
                        <div>sport-fe</div>
                    `
                }
            }
        ]
},

// sports模板的定义
 var sports ={
     template:`
     <div>
         <router-link to='/sport/be'>sport-be</router-link>
         <router-link to='/sport/fe'>sport-fe</router-link>
         <router-view></router-view>
     </div>
     `
 }

4 命名式路由
字面理解就是给路由设定一个名字呗，我们可以通过name来访问它，也可以根据它的name来设定路由导航。

1 根据已经设定的name来设定路由导航

// 首先给路由设置一个name
{
    path:'/home/:id',
    // 设置name为home
    name:"home",
    component:{
        template:`
            <div>home--{{$route.params.homeId}}</div>
        `
    }
}
//更加name来设定路哟导航，由于我这个是动态路哟，所以设置了params属性
<router-link :to="{name:'home',params:{homeId:888}}"  active-class='active'>home</router-link>

测试结果：
可以发现跳转完成但是，地址栏的hash并没哟改变

2 我们做一个点击跳转效果

//在vue实例的methods中添加一个go方法：
go(){
	//这种效果和第一个效果一样，同样可以把路由导航到/home/4444路径
    router.push({
        // 跳转到动态路由的话要加参数
        name:"home",
        params:{homeId:4444}
    })
}

效果图：可以发现hash没哟改变

四、路由的一些用法

1 路由重定向
使用到的属性redirect，当我们导航到home这条路由时，会自动重定向到sport这条路由

 routes: [
    { path: '/home', redirect: '/sport' }
  ]

2 路由组件传参
有三种形式，分别是：布尔模式，对象模式，函数模式。 都是基于props而言的

1 布尔模式，利用的是props，设为true

 {
    path:'/apple/:id',
    // props设置为true，让其能够接收
    props:true,
    component:{
    	// 接收id
        props:['id'],
        template:`
        	// 我们直接通过{{id}}来获取
            <div>{{id}}</div>
        `
    }
}

效果图：参数传递正常，接收正常

如果props设为false 我们会发现点击无效果：

2 对象模式 props是一个对象，props是静态的时候有用

{
    path:'/banana',
    props:{username:'wh',age:22},
    component:{
        props:['username','age'],
        template:`
            <div>{{username}}-----{{age}}</div>
        `
    }
}

效果图：

如果是一个动态路哟，你还想要获取动态参数，只能通过{{$route.params.id}}

template:`
	<div>{{username}}-----{{age}}-----{{$route.params.id}}</div>
`

3 函数模式： props是一个对象

{
    path:'/orange',
    // props设置为函数，返回一个对象
    props:(route)=>{
        return {
            username:'wh'
        }
    },
	props:(route)=>({username:'wh'})
	// 注意上面两个props函数的写法效果一样，任选一个即可//
	
    component:{
    	// 同样，这个接收值
        props:['username'],
        template:`
        	// 调用
            <div>{{username}}</div>
        `
    }
}

效果

3 命名视图
有时候我们想在同一级展示多个视图，但是又不想嵌套，这时可以使用它
注意： 如果视图没有命名，那么默认为default，这也是为啥下面我们直接default：ful

// 建立多个视图并且命名  name
<ul>
    <router-link to='/index'>首页</router-link>
    <router-link to='/search'>搜索</router-link>
</ul>
<router-view name='fe'>前端开发</router-view>
<router-view name='be'>后端开发</router-view>
<router-view >全栈</router-view>

//定义路由  用到了compontents 每个视图对应一个模板
{
    path:'/index',
    components:{
        default:ful,
        fe:fecon,
        be:becon
    }
}
// 三个模板
 const ful = {
     template:`
         <div>这里是全栈</div>
     `
 }
 const fecon = {
     template:`
     <div>这里是前端开发</div>
     `
 }
 const becon = {
     template:`
     <div>这里是后端开发</div>
     `
 }

效果图：

以上就是vue路由的一些基础知识。