Vue路由管理

路由定义： 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）
1.首先是在自己的但页面中引入vue-router的组件类库

<script src="./lib/vue-router-2.7.0.js"></script>

2.一般使用router-link来进行导航

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

3.使用router-view来显示匹配到对应的组件

<router-view></router-view>

4.使用Vue.extend来创建组件

//这是一个登录的例子
var login = Vue.extend({
	template:'<h1>这是一个登陆组件</h1>'
})

5.配置具体的路由

var vuerouter = new VueRouter({
	router:[
		{path:'/login',component:login }
	]
})

6.在Vue组件中注册即可

 var vm = new Vue({
      el: '#app',
      router: router // 使用 router 属性来使用路由规则
    });

7.展示结果

路由中带参数
1.在url中带参数

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

在path中加入：id就可以往路径中加入参数
2.获取路由中的参数 this.$route.params

var register = Vue.extend({
      template: '<h1>注册组件 --- {
   
   {this.$route.params.id}}</h1>'
    });

路由嵌套 使用children属性来使

1.父组件

const account = Vue.extend({
      template: `<div>
        这是account组件
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });

2.子组件（登录注册）

   const login = Vue.extend({
      template: '<div>登录组件</div>'
    });

    // 子路由中的 register 组件
    const register = Vue.extend({
      template: '<div>注册组件</div>'
    });

3.具体的路由实例

var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
        {
          path: '/account',
          component: account,
          children: [ // 通过 children 数组属性，来实现路由的嵌套
            { path: 'login', component: login }, // 注意，子路由的开头位置，不要加 / 路径符
            { path: 'register', component: register }
          ]
        }
      ]
    });

4.vue实例

 var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });