VueRouter基础
vue路由的注册
- 导入
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> # 可以是下载之后的 <script src="vue.min.js"></script> <script src="vue-router.js"></script>
- 定义一个匹配规则对象
let url=[ { path: "/", component: { template:`<div><h1>组件</h1></div>` } } ]
- 实例化VueRouter对象,并把匹配规则注册进去
let router = new VueRouter({ routes: url });
- 把VueRouter实例化对象注册Vue的根实例中
const app = new Vue({ el: "#app", router : router })
- 在div标签中直接调用就可以了
<!--4 直接写router-link标签就--> <router-link to="/">首页</router-link> <router-link to="course">课程</router-link> <router-view></router-view>
路由的命名
- 路由的参数name和调用this.$route.params.name
-
let url = [{ path: "/user/:name", name : 'user', component: { template: `<div><h1>这是{{this.$route.params.name}}页面</h1></div>`, mounted(){ console.log(this.$route) } } }]
- 调用
<div id="app"> <router-link :to="/">主页</router-link> <router-link :to="{name: 'login'}">登陆</router-link> <router-link :to="{name: 'user', params: {name: 'ruizhiling'}}">角色</router-link> <router-view></router-view> </div>
- 注意to一定动态绑定
手动路由
- 在url中通过写按钮的方式对其进行跳转
路由的参数
- url
- 显示
路由的钩子函数
-
-- beforeEach(function(to, from, next){ to 你要去哪里 from 你从哪里来 next 你接下来要做什么 }) -- afterEach(function(to, from){ to 你要去哪里 from 你从哪里来 })
命名的路由视图
- 一个路由对应多个组件
- div中写法
Vue的生命周期
-
图示
流程图
new Vue --> 监听数据 --> 初始化事件 --> 找el --> template --> 编译形成虚拟DOM --> 渲染页面 -- 数据改变重新渲染页面 -- app.$destroy()
使用router组件流程
- 下载
npm install vue-router
- 配置
- 注册到vue中
- 简单使用
原文地址:https://www.cnblogs.com/yuncong/p/10205726.html
时间: 2024-07-31 17:48:17