什么是路由-----路由的基本使用

一：什么是路由：

       根据用户请求的路径返回不同的页面或者数据

 

二：路由分为前端和后端路由

    

前端路由：

1、前端路由在进行页面切换的时候不会进行刷新

2、前端路由一般情况下都是用来做单页面(SPA)开发的

3、前端路由用户地址栏的路径发生改变的时候是不会经过后端的

4、前端路由会分为hash路由(带#号的路由，底层原理onhashChange) 和 history路由(H5的API)

后端路由：Node中 编写接口

 

 

三：使用：

1、安装

cnpm install vue-router -S

 

2、创建router文件夹 index.js

3、常用的配置项

mode:路由的形式

1、hash路由 带#的路由 默认是hash路 不需要后端的配置

2、history路由 不带#的路由 需要后端的配置

routes:每一个路由的配置项，routes是一个数组，数组中的每一个对象就代表一个路由的配置项

path:用户请求的地址路径

component:当路径匹配成功后需要渲染的组件

children:路由嵌套 chidlren就相当于一个小型的routes 当一级路由中用到了路由切换的时候就需要用到路由嵌套了

redirect:重定向

name:路由名称,

props:路由解耦

meta:路由的元信息 作用：携带当前路由特有的一些属性

import Vue from "vue"
import VueRouter from "vue-router";
import Movie from "../components/movie"
import Cinema from "../components/cinema"
import Mine from "../components/mine";
import HotMovie from "../components/hotmovie"
import CommingMovie from "../components/commingmovie"
import NotFound from "../components/NotFound"
import Detail from "../components/detail"
import Login from "../components/login"
import MineTwo from "../components/mineTwo"
Vue.use(VueRouter);



//路由的配置
const router = new VueRouter({
    mode:"hash",
    routes:[
        {
            path:"/",
            redirect:"/movie"
        },
        //一个对象代表一个路由的配置项
        {
            name:"movie",
            meta:{
                title:"电影",
                flag:true
            },
            path:"/movie",//匹配用户请求的地址
            component:Movie,//当路径匹配成功后显示对于的组件
            //  /movie/hotmovie
            children:[
                {
                    name:"hotmovie",
                    path:"hotmovie",
                    component:HotMovie
                },
                {
                    name:"commingmovie",
                    path:"commingmovie",
                    component:CommingMovie
                }
            ]
        },
        {
            path:"/cinema",//匹配用户请求的地址
            meta:{
                title:"影院",
                flag:true
            },
            component:Cinema//当路径匹配成功后显示对于的组件
        },
        {
            path:"/mine",//匹配用户请求的地址
            meta:{
                title:"我的",
                flag:false
            },
            children:[
                {
                    path:"mineTwo/:id/:name",
                    component:MineTwo
                }
            ],
            component:Mine//当路径匹配成功后显示对于的组件
        },
        {
            name:"detail",
            meta:{
                title:"详情",
                flag:false
            },
            //path:'/detail/:id/:name',
            path:"/detail",
            component:Detail,
            //props:true
        },
        {
            path:"/login",
            component:Login
        },
        {
            path:"**",
            component:NotFound
        }
    ]
})


export default router;

 

 

4、路由的内置组件

router-view:当用户请求的路径与path匹配成功后渲染component的组件

<template>
  <div id="app">
    <router-view></router-view>//在此渲染组件
   </div>
</template>

<script>

export default {
  name:"App",
  created() {
    console.log(this)
  },
};
</script>

4、路由的内置组件

router-view:当用户请求的路径与path匹配成功后渲染component的组件

router-link:路由跳转的方式

属性：

to:跳转的地址

tag:可以将router-link渲染成某个标签

<template>
    <div id="footer">
        <ul>
            <router-link 
                :to="item.path"
                v-for="(item,index) in tabs" 
                :key="index"
                tag="li"
                >
                <i class="iconfont" v-html="item.icon"></i>
                <span>{{item.text}}</span>
            </router-link>
        </ul>
    </div>
</template>

5、路由跳转的方式有哪些？

1、a标签

2、router-link

3、编程式导航

 

 

编程式导航

简单来：用JS来实现路由的跳转

this.$router.push

this.$router.replace

this.$router.go

this.$router.back

this.$router.forward

 

<button @click="handleForward()">前进</button>
   <button @click="handleReplace()">替换</button>
         <button @click="handlego()">go1</button>



//调用
 methods:{
        handleForward(){
            this.$router.forward();
        },
        handleReplace(){
            this.$router.replace("/mine");
        },
        handlego(){
            this.$router.go(0)
        }
    }