1. 路由属性

• path 路由跳转所到达的路径
• name
• component 路由跳转到所对应的组件
• redirect 路由重定位，主要设置刚进入页面时显示的组件，属性值为路径redirect:'/index'
• children 路由嵌套，主要实现路由跳转以及页面局部刷新

2. router-view
   路由匹配到的组件将显示到此标签<router-view></router-view>
3. router-link
   此标签实现路由跳转<router-link to="/index">
   下面来实现一个小功能
   

• 先写一个大的固定组件home.vue，里面放着导航栏以及页面底部的内容

<template>
    <div class="home">
        <div class="top">
            <ul>
            	**//每个导航栏标签点击之后会跳转到对应的路由**
                <li><router-link to="/index">首页</router-link></li>
                <li><router-link to="/news">新闻</router-link></li>
                <li><router-link to="/hot">热点</router-link></li>
                <li><router-link to="/movie">影视</router-link></li>
                <li><router-link to="/sports">体育</router-link></li>
            </ul>
        </div>
        <div class="bottom">
        	//路由对应的页面内容会显示到这里
            <router-view></router-view>
        </div>
    </div>
</template>

• 在index.js里面配置路由相关属性

//首先引入所有相关组件
import home from '@/components/home'
import index from "@/views/index";
import news from "@/views/news"
import hot from "@/views/hot"
import movie from "@/views/movie";
import sports from "@/views/sports";

const routes = [
    {
        path:'/',  //页面最初加载的路径，默认为/
        name:'home',
        component:home,  //页面最初加载的组件
        redirect:'/index',  //路由重定位，由于刚开始的路由'/'没有对应的组件显示，所以设置页面加载时显示'/index'首页内容
        children: [  //路由的嵌套，实现页面局部刷新
            {
                path:'/index',
                name:'index',
                component:index  //首页页面
            },
            {
                path:'/news',
                name:'news',
                component:news  //新闻页面
            },
            {
                path:'/hot',
                name:'hot',
                component:hot  //热点页面
            },
            {
                path:'/movie',
                name:'movie',
                component:movie  //影视页面
            },
            {
                path:'/sports',
                name:'sports',
                component:sports  //体育页面
            },
        ]
    }
]

如果没有设置children属性，而直接配置路由的话，页面就实现不了局部刷新，点击一个导航页面就会重新加载，且上面的导航栏消失，下面的代码千万千万千万不要模仿，这样写的页面性能太差了

const routes = [
    {
        path:'/',
        name:'home',
        component:home,
        redirect:'/index'
    },
    {
        path:'/index',
        name:'index',
        component:index
    },
    {
        path:'/news',
        name:'news',
        component:news
    },
    {
        path:'/hot',
        name:'hot',
        component:hot
    },
    {
        path:'/movie',
        name:'movie',
        component:movie
    },
    {
        path:'/sports',
        name:'sports',
        component:sports
    }
]

• 接下来就是写对应页面的组件，index.vue，news.vue，hot.vue，movie.vue，sports.vue，下面只演示一个组件index.vue

<template>
    <div class="index">
        这是首页页面
    </div>
</template>