Vue的路由

路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

1.引入路由
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 

2.创建组件对象
3.定义路由对象的规则
 //创建路由对象
const router = new VueRouter({
  routes:[
    {path:'/login',component:login},   //path: 路由的路径  component:路径对应的组件
    {path:'/register',component:register}
  ]
});

4.将路由对象注册到vue实例
const app = new Vue({
  el: "#app",
  data: {
    username:"小陈",
  },
  methods: {},
  router:router   //设置路由对象
});

5.在页面中显示路由的组件
<!--显示路由的组件-->
<router-view></router-view>

6.根据连接切换路由(哈希路由)
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

router-link使用

作用:用来替换我们在切换路由时使用a标签切换路由
好处:就是可以自动给路由路径加入#不需要手动加入
<router-link to="/login" tag="button">我要登录</router-link>
<router-link to="/register" tag="button">点我注册</router-link>

# 总结:
1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
2.router-link to属性用来书写路由路径   tag属性:用来将router-link渲染成指定的标签

默认路由

const router = new VueRouter({
  routes:[
    //{ path:'/',component:login},
    { path:'/',redirect:'/login'},  //redirect: 用来当访问的是默认路由 "/" 时 跳转到指定的路由展示  推荐使用
    { path:'/login', component:login},
    { path:'/register', component:register},
  ]
});

路由中参数传递

1.传统方式  通过?号形式拼接参数
const router = new VueRouter({
  routes:[
    //{ path:'/',component:login},
    { path:'/',redirect:'/login'},  //redirect: 用来当访问的是默认路由 "/" 时 跳转到指定的路由展示  推荐使用
    { path:'/login', component:login},
    { path:'/register', component:register},
  ]
});
 <router-link to="/login?id=21&name=zhangsan">我要登录</router-link>
const login = {
  template:'<h1>用户登录</h1>',
  data(){return {}},
  methods:{},
  created(){
    console.log("=============>"+this.$route.query.id+"======>"+this.$route.query.name);
  }
};


2.restful  通过使用路径方式传递参数
<router-link to="/register/24/张三">我要注册</router-link>
var router = new VueRouter({
  routes:[
    {path:'/register/:id/:name',component:register}   //定义路径中获取对应参数
  ]
});
const register = {
  template:'<h1>用户注册{{ $route.params.name }}</h1>',
  created(){
    console.log("注册组件中id:   "+this.$route.params.id+this.$route.params.name);
  }
};

嵌套路由

声明最外层和内层路由
<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>'
};

创建路由对象含有嵌套路由
const router = new VueRouter({
        routes:[
            {
                path:'/product',
                component:product,
                children:[
                    {path:'add',component: add},
                    {path:'edit',component: edit},
                ]
            },
        ]
    });

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

测试路由
<router-link to="/product">商品管理</router-link>
<router-view></router-view>