2.Vue-router

Vue-router包含功能：

• 支持HTML5历史模式或hash模式
• 支持嵌套路由
• 支持路由参数
• 支持编程式路由
• 支持命名路由

Vue-router的基本使用：

1. 引入库文件：vue-router.js

2. 添加路由链接

   1. /*router-link是vue中提供的标签，默认会被渲染成a标签
      to属性默认会被渲染成为href属性
      to属性的值会被默认渲染为#开头的hash地址*/
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>
      

3. 添加路由填充位

   1. //路由填充位也叫路由占位符
      //将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
      <router-view></router-view>
      

4. 定义路由组件

   1. const User = {
      	template:'<div>User组件</div>'
      }
      const Register = {
      	template:'<div>Register组件</div>'
      }
      

5. 配置路由规则并创建路由实例

   1. //创建路由实例对象
      var router = new VueRouter({
      	//routes是路由规则数组
      	routes: [
      		//每个路由规则都是一个匹配对象，其中至少包含path和component两个属性
      		//path表示当前路由规则匹配的hash地址
      		//component表示当前路由规则对应要展示的组件
      		{path:'/user',component:User}
      		{path:'/register',component:Register}
      	]
      })
      

6. 把路由挂载到Vue根实例上

   1. new Vue({
      	el:'#app',
      	router: router  //为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
      })
      

路由重定向：

//创建路由实例对象
var router = new VueRouter({
	//routes是路由规则数组
	routes: [
		//path表示需要被重定向的原地址，redirect表示要被重定向的新地址
		{path:'/',redirect:'/user'}
		{path:'/user',component:User}
		{path:'/register',component:Register}
	]
})

Vue-router嵌套路由：

• 点击父级路由链接显示模板内容

• 模板内容中又有子级路由链接

• 点击子级路由链接显示子级模板内容

• <script>
  	const Register = {
          template: '<div>
      		<h1>Register组件</h1>
          	<router-link to="/register/tab1">Tab1</router-link>
          	<router-link to="/register/tab2">Tab2</router-link>
          	//子路由填充位置
          	<router-view/>
      	</div>'
      }
      
      const Tab1 = {
  	template:'<div>Tab1组件</div>'
  	}
  	const Tab2 = {
  		template:'<div>Tab2组件</div>'
  	}
      
      var router = new VueRouter({
  	//routes是路由规则数组
  	routes: [
  		{path:'/user',component:User}
  		{
          	path:'/register',
          	component:Register,
          	//通过children属性，为/register添加子路由规则
          	children:[
          		{path:'/register/tab1',component:Tab1},
                   {path:'/register/tab2',component:Tab2}              
      		]
          }
  	]
  })
  </script>
  

Vue-router动态路由匹配

<script>
	var router = new VueRouter({
        routes: [
            //动态路径参数以冒号开头
            {path:'/user/:id',component:User}
        ]
    })
    
    const User = {
        //路由组件中通过$route.params获取路由参数
        template: '<div>User {{$route.params.id}}</div>'
    }
</script>

路由组件传递参数 （$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦）

1. props值为布尔类型

   1. <script>
      	const router = new VueRouter({
              routes: {
                  //如果props被设置为true,route.params将会被设置为组件属性
                  {path:'/user/:id',component:User,props:true}
              }
          })
          
          const User = {
              props: ['id'], //使用props接收路由参数
              template: '<div>用户ID:{{id}}</div>' //使用路由参数
          }
      </script>
      

2. props值为对象类型

   1. <script>
      	const router = new VueRouter({
              routes: {
                  //如果props是一个对象,它会被按原样设置为组件属性
                  {path:'/user/:id',component:User,props:{uname:'lisi',age:12}}
              }
          })
          
          const User = {
              props: ['uname','age'], //使用props接收路由参数
              template: '<div>用户ID:{{uname + '---------'+ age}}</div>' //使用路由参数
          }
      </script>
      

3. props值为函数类型

   1. <script>
      	const router = new VueRouter({
              routes: [
                  //如果props是一个函数，则这个函数接收route对象为自己的形象
                  {
                      path: '/user/:id',
                      component: User,
                      props: route => ({uname: 'zs',age:20,id:route.params.id})
                  }
              ]
          })
          const User = {
              props: ['uname','age','id'], //使用props接收路由参数
              template: '<div>用户ID:{{uname + '---------'+ age +'-------'+id}}</div>' //使用路由参数
          }
      </script>
      

Vue-router命名路由

<router-link :to="{name:'user',params:{id:123}}">User</router-link>

<script>
	const router = new VueRouter({
        routes: [
            {
                path: '/user/:id',
                name: 'user',//重命名
                component: User
            }
        ]
    })
</script>

Vue-router编程式导航

this.$router.push(‘hash地址’)

this.$router.go(n) //1前进 -1 后退

<script>
	const User = {
        props: ['uname','age','id'], //使用props接收路由参数
        template: '<div>
        		<h1>用户ID:{{uname + '---------'+ age +'-------'+id}}</h1>
    			<button @click="goRegister">跳转注册页面</button>
    	</div>', //使用路由参数
        methods: {
            goRegister(){
                this.$router.push('/register')
            }
        }
    }
</script>

router.push()方法的参数规则
//字符串（路径名称）
router.push('/home')
//对象
router.push({path: '/home'})
//命名的路由（传递参数）
router.push({name:'/user',params:{id: 123}})
//带查询参数，变成 /register?uname=lisi
router.push({path:'/register',query:{uname: 'lisi'}})