vue项目路由知识

路由介绍

路由的组成为三大部分  

1、<router-link to="/">首页</router-link>    用于设置相关属性 如标签种类 tag属性  跳转地址to

2、<router-view/> 用于将</router-link> 显示于页面

3、router.js配置  对象形式配置

路由注意点

1、首先设置方式俩种 路径或者name

2、新版vue更新router配置 添加mode：histroy 以变量的形式  在new router对象之前

3、component  不要添加s  添加了s就要改变形式后面是一个对象如下

配合router-view  实现其组件复用  不像react需要导入在可以本页面使用

    {
        path: '/home',
        name: 'home',
         alias:'/',
          //路由别名
        components: {
            default:Home,
            'academic':Academic

        }
    },

    <router-view name="academic"/>

4、对于子路由设置子路径要写明父路径 但是不要加    .    符号

5、router-link-exact-active   与 router-link-active 区别

两者作用范围不同  前者是精确的点击   router-link-active  后者是后者点击的路径中包含前者的路径两者都会起作用 例如：

path:"/home"   path:"/home/persion"  点击后者前者也会触发效果会认为后者是前者的子路径 

6、对于子路由来讲在children 属性中path可以不加父路由名称 但是不要涉及/  （不然会从根路径下寻找）

<template>
    <div id="app">
        <div id="nav">
            <router-link to="/">首页</router-link>
            |
            <router-link to="/about">关于</router-link>
            |
            <router-link to="/learn">学习</router-link>
            |
            <router-link to="/course">课程</router-link>
            |
            <router-link to="/commit">社区</router-link>
            |
            <router-link :to="{name:'academic'}" tag="li">学术研究</router-link>
            <router-link :to="{name:'download'}" tag="li">资源下载</router-link>
            <router-link :to="{name:'persion'}" tag="li">个人中心</router-link>
            <router-view/>
        </div>
        <router-view/>
    </div>
</template>

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Learn from '../views/learn.vue'
import Course from '../views/course.vue'
import Commit from '../views/commit.vue'
import Person from '../components/commit/Persion.vue';
import Academic from "../components/commit/Academic";
import Download from "../components/commit/Download";


Vue.use(VueRouter)
const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: About
    },
    {
        path: '/learn',
        name: 'learn',
        component: Learn
    },
    {
        path: '/course',
        name: 'course',
        component: Course
    },
    {
        path: '/commit',
        name: 'commit',
        component: Commit,
        children: [
            {
                path: '/commit/persion',
                name: 'persion',
                component: Person
            },
            {
                path: '/commit/academic',
                name: 'academic',
                component: Academic
            },
            {
              path:'/commit/download',
              name:'download',
              component:Download
            }


        ]
    }

]
const mode = "history"

const router = new VueRouter({
    routes,
    mode
})


export default router

---------------------------------------------------------------------------------------------

动态路由   及其复用    重定向

动态路由利用数据本身独一无二的id来指明路由路径

设置关键字如下  router.js中单独建立一个路由

:to="{name:'question',params:{id:item.questionId}}"

绑定to属性 并注明params 数据  是个对象

注意点：对于组件来说 都拥有生命周期   每个组件中this都指向组件本身  可以通过里面一些信息获取其身份信息

如下面的例子  重要信息  this.$router 里面含有唯一的动态路由地址可以利用它获取数据 运用时可以参考里面的信息

重定向  在某个路径下将路由定位到指定的页面（在前进一步） 关键字如下：   点击到了commit页面会加强显示学术页面

redirect:'/commit/academic',    重定向

{
  path:"/question/:id",
  name:'question',
  component:Question
}
//设置跳转的路径 ：id可以设置动态路  以数据的单一属性作为路由路径名称
<template>
    <div class="content">

        <router-link
                v-for="item in questionList" :key="item.questionId"
                :to="{name:'question',params:{id:item.questionId}}" tag="li">
                {{item.title}}
        </router-link>
        <router-view/>
    </div>

</template>
        created() {
            var id = this.$route.params.id;
            var text = this.questionList.findIndex(item => item.questionId == id);
            var text = this.questionList.findIndex(item => {
                return item.questionId == id;
            });
            this.question = this.questionList[text].title;

        },