Vue实战之vue中的路由(VueRouter)

Vue中路由(VueRouter)

13.1 路由

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

13.2 作用

用来在vue中实现组件之间的动态切换

13.3 使用路由

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>  //vue 路由js

2. 创建组件对象
     

  //声明组件模板
       const login = {
         template:'<h1>登录</h1>'
       };
       
       const register = {
         template:'<h1>注册</h1>'
       };

       
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>

13.4 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渲染成指定的标签

13.5 默认路由

作用:用来在第一次进入界面是显示一个默认的组件

   

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

13.6 路由中参数传递

- 第一种方式传递参数 传统方式

1. 通过?号形式拼接参数
     

   <router-link to="/login?id=21&name=zhangsan">我要登录</router-link>

2. 组件中获取参数
     

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

- 第二种方式传递参数 restful

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

  <router-link to="/register/24/张三">我要注册</router-link>
       var router = new VueRouter({
         routes:[
           {path:'/register/:id/:name',component:register}   //定义路径中获取对应参数
         ]
       });

   
2. 组件中获取参数
   

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

13.7 嵌套路由

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},
                       ]
                   },
               ]
           });

   
3. 注册路由对象
     

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

4. 测试路由
   

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