vue中的路由（vue router）

一、Vue Router的基本使用

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。---摘自官网

通俗理解：通过使用Vue Router可以使现有的开发方式更加灵活，它可以根据前端请求url在对应的页面中展示不同组件。

1、引入路由

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

注意：vue-router.js需要放在vue.js的下方，否则将会可能出现如下的错误：

2、创建组件对象

//登录组件
const login = {
	template: `<div><h2>用户登录</h2></div>`
};
//注册组件
const reg = {
	template: `<div><h2>用户注册</h2></div>`
};
const notFound = {
	template: `<div><h3 style="color: red;">404 Not Found当前组件不存在！</h3></div>`
};

注意：在template当中，我们需要使用唯一的根元素（通常为div）对子元素进行包裹。

3、创建路由规则对象

const router = new VueRouter({
   routes: [       //注意：此处是routes!
        {path: '/',redirect: '/login'},        //默认展示登录组件 redirect表示要重定向到的路径
        {path: '/login',component: login},  //path代表路由路径，component代表路由路径对应的组件
        {path: '/reg',component: reg},
        {path: '*',component: notFound},    //*表示通配路径
    ]
});

注意：
  （1）path表示url请求路径，component表示请求路径所对应的组件。
  （2）redirect用来表示当访问的是默认路由'/'时，跳转到指定的路由展示。
  （3）*表示匹配通配路径，当用户访问的路由不存在时，则会跳转到对应的组件。
  （4）{path: '*',component: notFound}通常放在路由规则的最后一条。

4、将路由对象注册到vue实例

const app = new Vue({
    el: "#app",
    data: {
        msg: "vue router的基本使用",
    },
    methods: {},
    computed: {},
    //注册路由
    router,
});

5、在页面中显示路由的组件

 <!--展示路由-->
<router-view></router-view>

6、根据链接切换路由

<!--切换路由-->
<a href="#/login">用户登录</a>
<a href="#/reg">用户注册</a>

二、切换路由的两种方式

1、标签方式切换路由

<a href="#/路由路径">XXXX</a>

<router-link to="/路由路径">XXXX</router-link>

<router-link :to="{path:'/路由路径'}">XXXX</router-link>

<router-link :to="{name:'路由名称'}">XXXX</router-link>

注意：此种方式需要在路由规则对象中写入路由名称，例如：{path:'/login', component: login, name:'Login'}

2、js方式切换路由

this.$router.push('/路由路径');

this.$router.push({path:'/路由路径'});

this.$router.push({name:'路由名称'});

注意：
   this.$ route表示当前路由，而this.$router表示路由管理器。

三、路由中传递参数的两种方式

地址栏传递参数分为两种方式：
1. queryString ?                                  this.$route.query.key

2. restful 路径传递参数 /xx/21             this.$route.params.key

1、第一种方式传递参数==>传统方式

通过?号形式拼接参数

<!--a标签形式-->
<a href="#/login?id=21&name=zhangsan">用户登录</a>
<!--router-link标签形式-->
<router-link to="/login?id=21&name=zhangsan">用户登录</router-link>
<!--router-link标签形式-->
<router-link :to="{path:'/login?id=21&name=zhangsan'}">用户登录</router-link>
<!--router-link标签形式-->
<router-link :to="{name:'login',query:{id:21,name:'zhangsan'}}">用户登录</router-link>

组件中获取参数

const login = {
  template:'<div><h1>用户登录</h1></div>',
  created(){
    console.log(this.$route.query.id+"======>"+this.$route.query.name);
  }
};

2、第二种方式传递参数==>restful

通过使用路径方式传递参数

<!--a标签形式-->
<a href="#/register/24/张三">用户注册</a>
<!--router-link标签形式-->
<router-link to="/register/24/张三">用户注册</router-link>
<!--router-link标签形式-->
<router-link :to="{path:'/register/24/张三'}">用户注册</router-link>
<!--router-link标签形式-->
<router-link :to="{name:'register',params:{id:24,name:'zhangsi'}}">用户注册</router-link>

var router = new VueRouter({
  routes:[
    {path:'/register/:id/:name',component:register,name: 'register'}   //定义路径中获取对应参数
  ]
});

组件中获取参数

const register = {
  template:'<h1>用户注册{{ $route.params.name }}</h1>',
  created(){
    console.log("注册组件中id:   "+this.$route.params.id+this.$route.params.name);
  }
};

四、嵌套路由

1、声明最外层和内层路由

<template id="product">
    <div>
        <h1>商品管理</h1>
		<!--切换路由-->
        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品编辑</router-link>
		<!--展示子路由-->
        <router-view></router-view>
    </div>
</template>

//声明组件模板
const product={
  template:'#product'
};

const add = {
  template:'<h4>商品添加</h4>'
};

const edit = {
  template:'<h4>商品编辑</h4>'
};

2、创建含有嵌套路由的路由对象

const router = new VueRouter({
        routes:[
            {
                path:'/product',
                component:product,
                children:[
                    {path:'add',component: add},
                    {path:'edit',component: edit},
                ]
            },
        ]
    });

注意：children中的子路由路径不能以/开头。

3、注册路由对象

const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    router,//定义路由对象
});

4、测试路由

<router-link to="/product">商品管理</router-link>
<router-view></router-view>