vue路由

路由

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

路由的基本使用

使用路由是为了方便不同组件之间的来回切换

 <div id='app'>
        <!-- router-link 默认渲染成一个a标签 也可以通过tag将其渲染成其它标签-->
        <router-link to='/login' tag='span'>登录</router-link>
        <router-link to='/regist'>注册</router-link>
        <!-- router-view:路由规则匹配到的组件，将会展示到这个容器中 -->
        <transition mode='out-in'>
            <router-view></router-view>
        </transition>
    </div>

// javascript
 var login = {
        template: '<h1>登录组件</h1>'
    };
    var regist = {
        template: '<h1>注册组件</h1>'
    }
    // 当导入vue-router后，在window全局对象里，就有了一个路由的构造函数。VueRouter
    var routerobj = new VueRouter({ // 创建一个路由对象,可以为配置函数传入一个配置对象
        routes: [//  [路由匹配规则] 
            // 每个路由规则，都是一个对象，这个规则对象，身上有两个必须的属性
            // 属性一：【path】表示监听哪个路由链接地址
 // 属性二：【component】表示，如果路由是前面匹配到的path，则展示component属性对应的组件
            // 注意：component的属性值必须是一个组件模板对象，不能是组件的引用名称
            // { path: '/', component: login }, // 默认展示登录组件 ，不推荐
            { path: '/', redirect: "/login" },
            { path: '/login', component: login },
            { path: '/regist', component: regist }
        ],
        linkActiveClass: 'myactive' // 修改默认类名
    });

    var vm = new Vue({
        el: '#app',
        components: {
            "login": login,
            "regist": regist
        },
        router: routerobj  
        // 将路由规则对象注册到vm实例上,用来监听url地址的变化，然后展示对应的组件
    })

路由中使用query方式传参

<div id='app'>
   <!-- 如果在路由中，使用查询字符串，给路由传递参数， 则不需要修改路由规则的path属性 -->
        <router-link to='/login?id=10'>登录</router-link>
        <router-link to='/regist'>注册</router-link>
        <router-view></router-view>
    </div>

// javascript
 	var login = {
        template: '<h1>登录组件-----{{$route.query.id}}</h1>',
        created() {
            console.log(this.$route.query.id) // 是$route,而不是$router
        }
    };
    var routerobj = new VueRouter({
        routes: [
            { path: '/login', component: login },
            { path: '/regist', component: regist }
        ]
    });

路由中使用parmas方式传参

  <div id='app'>
        <router-link to='/login/10086'>登录</router-link>
        <router-link to='/regist'>注册</router-link>
        <router-view></router-view>
    </div>

 	var login = {
        template: '<h1>登录组件-----{{$route.params.id}}</h1>',
        created() {
        // 使用$route.params 获取参数
            console.log(this.$route.params.id)
        }
    };
     var routerobj = new VueRouter({
        routes: [
            { path: '/', redirect: "/login" },
            // 在路由地址后面使用占位符，表示将接受一个名为id的参数
            { path: '/login/:id', component: login }, 
            { path: '/regist', component: regist }
        ],
    });

路由嵌套

	 <div id='app'>
	    <!-- 父级路由 -->
        <router-link to='/account'>Account</router-link>
        <router-view></router-view>
    </div>
	
    <template id='temp1'>
        <div>
            <h1>
                这是Account组件
            </h1>
            <router-link to='/account/login'>登录</router-link>
            <router-link to='/account/regist'>注册</router-link>
            <router-view></router-view>
            <!-- 一定要为子路由设置一个 router-view容器,否则无法展示子路由 -->
        </div>
    </template>

// javascript
	var account = {
        template: '#temp1'
    }
    var login = {
        template: '<h1>登录</h1>'
    }
    var regist = {
        template: '<h1>注册</h1>'
    }
    var routerobj = new VueRouter({
        routes: [
            {
                path: '/account',
                component: account,
                children: [ // 子路由
                    { path: 'login', component: login },
              // path前面不能带'/'斜线，否则永远以根路径开始请求，不方法用户去理解URL地址
                    { path: 'regist', component: regist }
                ]
            }
        ],
    });

    var vm = new Vue({
        el: '#app',
        router: routerobj
    })