Vue2.0 Vue路由(重要)路由的基本使用

我想实现的是

点击About路径就变为/about随后展示区里面展示About.vue

点击Home路径就变为/home随后展示区里面展示Home.vue

注:不是说导航名、路径名、组件名三者一定要一致

如果说你的路径是'.../#/'这是这涉及到路由的俩种工作模式

我们路由技术是单页面

---

html中是靠俩个<a>标签进行页面直接来回跳转的

从头创建文件

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    render: h => h(App)
}).$mount('#app')

App.vue

<template>
    <div>
        
    </div>
</template>

<script>
    export default {
        name: 'App',
        components:{},
    }
</script>

<style>

</style>

Home.vue

<template>
    <div>
        <h2>这里是Home组件,你跳转到了Home组件</h2>
    </div>
</template>

<script>
    export default {
        name:'Home',
        components:{},
    }
</script>

<style scoped>

</style>

About.vue

<template>
    <div>
        <h2>这里是About组件,你跳转到了About组件</h2>
    </div>
</template>

<script>
    export default {
        name:'About',
        components:{},
    }
</script>

<style scoped>

</style>

想用路由技术那就得

安装路由

npm i vue-router

这个vue-router是vue里面的插件库

那就要use

引入vue-router

main.js

import Vue from 'vue'
import App from './App.vue'

//引入vue-router
import VueRouter from 'vue-router'

Vue.config.productionTip = false

//应用vue-router
Vue.use(VueRouter)

new Vue({
    render: h => h(App)
}).$mount('#app')

在学Vuex的时候只有引入Vuex和应用了Vuex,vm(Vue实例对象)才承认了store配置项。

那应用了VueRouter对我们产生了哪些影响?

能在vm里写一个全新的配置项router(路由器)

先值还写'hello'看看行不行

main.js

import Vue from 'vue'
import App from './App.vue'

//引入vue-router
import VueRouter from 'vue-router'

Vue.config.productionTip = false

//应用vue-router
Vue.use(VueRouter)

new Vue({
    router:'hello',
    render: h => h(App)
}).$mount('#app')

Error in beforeCreate hook: "TypeError: this._router.init is not a function"

报的是一个底层的错误，就意味着现在不允许你随便写一个就是路由器

要求的是要实实在在的一个路由器

创建一个文件夹(一般在router里面都会有)

src > 创建一个router文件夹 > index.js(重要:专门打造路由器的)(和Vuex的创建特别像)

//该文件专门创建这个应用的路由器

//你得求vue-router
import VueRouter from 'vue-router'//可以当成构造函数去用
//引入组件
import About from '@/components/About'
import Home from '../components/Home.vue'

//创建并暴露一个路由器
export default new VueRouter({
    //怎么配置?对应关系就是路径(key)和组件(value)
    routes:[
        {
            //第一组路由规则
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
    ]
})

main.js

import Vue from 'vue'
import App from './App.vue'

//引入vue-router
import VueRouter from 'vue-router'
//引入路由器
import router from './router/index'

Vue.config.productionTip = false

//应用vue-router
Vue.use(VueRouter)

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

浏览器路径出现/#/就表示路由器已经开始工作了

虽然能够实现路由，但是你不能用<a>标签去点击切换了

得用vue-router给我提供的这个库里的一个特殊标签去写，它的名字叫<router-link>

语法格式:

<router-link to="/home">Home</router-link>

添加样式:

<router-link to="/home" class="">Home</router-link>

里面的router-link相当于HTML里的<a>;to相当于HTML里的href,但是不能写成to="./home"这种相对路径形式

router-link会帮你转换成<a>那你写了一个button在里面，不是结构破坏了?所以后面有一个编程式路由导航

---

说回继续路由:没有展示About.vue和Home.vue的内容，而且汇报Uncaught SyntaxError: Identifier 'pluginnamearr' has already been declared错误。

到这一环节路由器已经能监测到你路径上的变化了并且路由器已经完成了路由的匹配。

组件里的内容为什么没有出现?

原因很简单你没有告诉它在哪里出现

像我们学插槽一样，我们在这用到另外一个特殊的标签: <router-view></router-view>

但是报错没解决，但是没影响切换，先不管它

总结

1.理解:一个路由(toute)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。

2.前端路由:key是路径,value是组件

1.基本使用

1.安装vue-router,命令:

npm i vue-router

2.应用插件:Vue.use(VueRouter)，应用前先引入import VueRouter from 'vue-router'

3.编写router配置项

src > 创建router > index.js

//该文件专门创建这个应用的路由器

//你得求vue-router
import VueRouter from 'vue-router'//可以当成构造函数去用
//引入组件
import About from '@/components/About'
import Home from '../components/Home.vue'

//创建并暴露一个路由器
export default new VueRouter({
    //怎么配置?对应关系就是路径(key)和组件(value)
    routes:[
        {
            //第一组路由规则
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
    ]
})

4.实现切换(active-class可以配置高亮样式)

<router-link to="/home">Home</router-link>

5.指定展示位置

<router-view></router-view>