Vue 路由

认识路由:

1.定义:路由的本质就是一种对应关系，比如说url地址和资源之间的对应关系

2.分类:后端路由和前端路由

3.实现简易的前端路由,使用onhashchange事件监听hash值的改变

监听hash值变化的事件:window.onhashchange = function() { }

4.前端路由的核心思路:

通过a标签的点击改变锚点hash值     

使用window.onhashchange监听hash值的改变     

通过location.hash获取到当前的hash值并进行判断，展示hash值对应的组件

	
	主页
	科技
	财经
	娱乐
	
	
	

Vue-Router的特性:

支持H5历史模式或者hash模式    /    支持嵌套路由   /  支持路由参数   /  支持编程式路由

支持命名路由   /   支持路由导航守卫   /   支持路由过渡动画特效  /   支持路由懒加载 

支持路由滚动行为

使用Vue-Router实现前端路由的步骤

A.导入 Vue-Router.js 文件

B.添加路由链接

C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)

D.定义路由组件

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

F.将路由挂载到Vue实例中

	
	User
	Register

	
	

 路由重定向:

当我们需要为页面设置一个默认展示的组件，此时我们可以使用路由重定向来完成

实现路由重定向步骤:

var myRouter = new VueRouter({
        //routes是路由规则数组
        routes: [
            //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
            { path: "/", redirect: "/user" },
            { path: "/user",component: User},
            {path: "/login",component: Login}
        ]
    })

	
	User
	Register

	
	

 嵌套路由

为现有的路由添加子级路由
第一步:更改现有的路由模板：(在模板中添加子级路由链接以及占位符)
    var Login = {
        template: `
        This is Login
        账号密码登录
        扫码登录
       
       
        `
    }
第二部:使用children添加子级路由规则：
    var myRouter = new VueRouter({
        routes: [{
            path: "/login",
            component: Login,
            //通过children属性为/login添加子路由规则
            children: [{path: "/login/account",component: account },
                {path: "/login/phone",component: phone},
            ]
        }]
    })

	
	User
	Register

	
	

动态路由匹配

定义:动态路由就是可以接收参数数据的路由形式，路由地址的一部分是会发生变化

接收动态路由传递的参数方法 : $route.params

通过props属性将组件和路由结合:

 A.我们可以将props属性设置为true，route.params将会被设置为组件属性，那么组件可以通过props接收route.params     

B.可以将props属性设置为一个对象，那么组件可以通过props接收对象的数据     

C.还可以将props属性设置为一个函数，那么就可以同时将参数数据以及对象数据传递给组件。

 1.props 的值为布尔值类型,动态参数

如果props属性设置为true，route.params会被设置为组件属性,组件通过props接收路由参数

div id="app">
	User1
	User2
	User3
	Register

	
	

 2..props 的值为对象类型,静态参数

如果 props 属性是一个对象，会被原样设置为组件属性,以键值对的形式,可存储多个属性,中间用逗号隔开 , 组件可以通过 props 中的属性名接收对象的数据

 

div id="app">
User1
User2
User3
Register

3.props 的值为函数类型,动态的静态结合参数

如果 props 属性是一个函数，则这个函数接收 route 对象为自己的形参

	User1
	User2
	User3
	Register

	
	

 命名路由

作用 : 给路由规则起别名,实现页面跳转

方法 : 使用name属性给路由设置别名

div id="app">
User1
User2

User3
Register

 页面导航:1.声明式导航   2.编程式导航

1.声明式导航:通过点击链接的方式实现的导航

   如:标签      vue中的标签

2.编程式导航:通过调用js形式的api方法实现导航的方式

  如:location.href

3.实现编程式导航的方法:

      this.$router.push("/hash 地址");     跳转到 hash 地址,this.$router.push("/login");

      this.$router.go( 数值 );   历史纪录的前进后退,this.$router.go( -1 );后退

//编程式导航




    
    
    
    
    
    



    
    
        User1
        User2
        User3
        Register

        
        
    

    

 this.$router.push(参数) 中参数的命名规则

1.字符串   this.$router.push(hash地址)

2.对象     this.$router.push({path:'/地址'})

3.命名的路由传递参数    this.$router.push({name:'别名',params:{属性:值}})

4.带查询参数,变成/别名?属性=值    this.$router.push({path:'/地址',query:{属性:值}})