Vue Router 是 Vue.js 官方的路由管理器
自动全局安装:
vue create 项目名称
手动配置:
1、安装
在app项目文件夹里面
npm i vue-router
2、在min.js下引入包
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router';
3、使用use来引用(使用)
Vue.use(VueRouter);
4、需要配置router -> route.js
引入组件,配置路由表
配置路由表(当前是哪个路径需要执行哪个组件)
const routes = [ //配置什么路径就走哪个组件 { path:'/', //根路径 component:app //app就是根 }, { path: '/foo',//路径 component: Foo//组件 }, { path: '/bar', component: Bar } ]; export default new VueRouter({ router:routes //等同于 //router })
在new vue-router时候,通过routes来引配置数
new Vue时候是通过router来引路由
扫描二维码关注公众号,回复:
5360317 查看本文章
![](/qrcode.jpg)
5、放到跟下
new Vue({ el:'#app', render:()=>h, router })
6、渲染,在页面中定义router-view 标签
<router-link></router-link> //有children时候,父组件必须有router-view <router-view></router-view> //路由匹配到的组件将渲染在这里
<router-link>//默认会渲染成一个a标签 <router-link tag="button"> //这样可以加一个按钮的样式
<router-link>
to属性
表示目标路由的链接
通过 to 属性指定目标地址
默认渲染成带有正确链接的 <a> 标签
/*字符串*/ <router-link to="home">home</router-link> /*v-bind 的 JS 表达式 */ 如果是:to,路径要写成字符串 比如<router-link :to="'home'">Home</router-link> :to 可以是字符串也可以是对象 /*命名的路由 params*/ <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> /*带查询参数,下面的结果为 /register?plan=private*/ <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
:to="{path:'a'}"
:to="{params:{a:5}}"
注意:如果使用params,那么就不能定义path,改为使用name
tag属性
具有tag属性的router-link会被渲染成相应的标签
//比如生成一个按钮 <router-link tag ="button"></router-link>
replace属性
replace在routre-link标签中添加后,页面切换时不会留下历史记录
<router-link :to="/home" replace></router-link>
active-class属性
默认值 "router-link-active"
设置 链接激活时使用的 CSS 类名
<router-link :to="/home" active-class="u-link--Active">Home</router-link>
可以在router.js文件中设置
const router = new VueRouter({ mode: 'hash', linkActiveClass: 'u-link--Active', // 这是链接激活时的class })
exact属性
开启router-link
的严格模式,默认值 false
//这个链接只会在地址为 / 的时候被激活 <router-link :to="/" exact>home</router-link>
exact-active-class属性
默认值 router-link-exact-active
配置当链接被精确匹配的时候应该激活的 class
激活class 应用在外层元素
让激活 class 应用在外层元素,而不是 <a> 标签本身,可以用 <router-link> 渲染外层元素,包裹着内层的原生 <a> 标签
<router-link tag="li" to="/foo"> <a>/foo</a> </router-link>