第一次安装vue-router及使用

先从创建项目开始




随便点击一个 网址
可以打开页面

以上我们项目就创建好了
下面开始安装vue-router
执行命令

npm install vue-router --save

import Vue from 'vue'
import VueRouter from "vue-router";

//1.注入插件
Vue.use(VueRouter)

//2.定义路由
const routes=[]

//3.创建路由实例
const router=new VueRouter({
    routes
})

//4.导出 router实例
export default router

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

Vue.config.productionTip = false

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

下面我们开始创建路由组件
先把一些东西 清理掉

<template>
  <div id="app">
  </div>
</template>

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

<style>
</style>

<template>
  <div>
    <H1>我是首页</H1>
    <p>我是首页的内容，go，go，go</p>
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>

</style>

<template>
  <div>
    <H1>我是关于</H1>
    <p>我是关于的内容，run，run，run</p>
  </div>

</template>

<script>
export default {
name: "About"
}
</script>

<style scoped>

</style>

然后在点击项目地址
可以看到效果图

路由的默认路径

我们这里还有一个不太好的实现:
默认情况下, 进入网站的首页, 我们希望渲染首页的内容.
但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.
如何可以让路径默认跳到到首页, 并且渲染首页组件呢?
非常简单, 我们只需要配置多配置一个映射就可以了.

配置解析:
我们在routes中又配置了一个映射.
path配置的是根路径: /
redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

这样我们重新打开页面时，看到的就是 首页的内容

HTML5的History模式

router-link补充

在前面的中, 我们只是使用了一个属性: to, 用于指定跳转的路径.
还有一些其他属性:

<router-link to='/home' tag='li'>

tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a>
replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.
在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.
但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.

通过代码跳转路由

这样做就可以通过代码 跳转 页面了