vue路由

2019年8月23日

vue路由的基本使用

首先引入vue的包，再引入vue-router的包
将路由规则对象注册到vm实例上，用来监听URL地址的变化，然后展示相应的组件

var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {},
            //将路由规则对象， 注册到vm实例上，用来舰艇URL地址的变化，然后展示对应的组件
            router: routerObj 
        })

创建一个路由对象， 当导入vue-router之后，在windows 全局对象中，就有了一个路由的构造函数叫做VueRouter
在new路由对象的时候，可以为构造函数传递一个配置对象

var routerObj=new VueRouter({
            routes:[
                {path:'/login',component:login},
                {path:'/register',component:register}
            ]
        })

路由匹配规则
每个路由规则都是一个对象，这个规则的对象必须有两个必须的属性

			属性1：path 表示监听哪个路由链接地址
            属性2：component，表示如果路由是前面匹配到的path，则展示component属性对应的组件
            注意：component的属性值必须是一个组件的模板对象 不能是组件的引用名称

然后再创建组件模板

var login = {
            template:  '<h1>这是登录组件</h1>'
        }
        var register = {
            template: '<h1>这是注册组件</h1>'
        }

在#app中放置router视图层

<router-view></router-view>

然后就可以使用啦

默认打开是这样的

---

点击登录之后地址栏会变为/login，然后切换到登录组件

---

注册组件也是一样的

---

跳转组件的a链接

		<a href="#/login">登陆</a>
        <a href="#/register">注册</a>

也可以使用vue-router提供的router-link来代替

<router-link to="/login"><router-link>

---

路由redirect重定向

设置页面打开时的默认路由

{path:'/',redirect:'/login'},

此时打开页面默认重定向到/login这里