写这个主要是为了帮助我自己的记忆并且以后回顾 如果不小心竟然有人看 有错误的地方欢迎指出，如果....你懂的！
初学时写的，有些解释存在问题，只当作自己记录的笔记
路由守卫 meta
路由跳转 首先要说的是 name¶ms path&query 不要用混了
this.$router.push & this.$router.replace
区别： 第一个跳转把离开的地址放在历史栈 而replace 是直接把他替代了也就是说 回退的时候没有刚才离开的地址
this.$router.push("组建名") //跳转 这个可以用在平行组件 我在子路由中使用发现不好用
具体不太清楚(以前写的貌似这么直接用背身就是不正确的如果写路径是可以的)
this.$router.push({name:" 组件名 "})；
this.$router.push({path:" 路径 "})
this.$router.push({ name:"组件名"，params:{ code:2 }}) //跳转加传值
this.$router.push({path:'/user', query:{age:23} });
this.$route.params.code //接收参数值
this.$route.query.age //接收参数值
<router-link to=“/user/23”>K<router-link> //这中需要 user /：id
<router-link :to={name:"ming" ,params:{name:"wangye"}}>ad<router-link> //这两种路由都不需要 user /：id
<router-link :to="{path:'/user/admin ' , params:{name:' wnahg ', age: ' sdsad '}}">sd</router-link>（这里忘记了 后续项目尝试在做改动）
路由
路由中有三个基本的概念 route, routes, router。
route：它是一条路由
routes：它是路由组
router：它可以理解为路由的管理者
我们一起来配置一下路由 ：
1. 在js 中配置路由
const routes=[ //routes 是路由组 它里面包含每一条路由
{path:'/home',component:Home} //path 指的是路径 component 指的是组建
{path:'/admin',component:Admin}
]
2. 创建router 对路由进行管理
const router =new VueRouter({ //router 理解为是路由的管理者
routes // routes: routes 的简写
})
3.把路由实例放入到 vue的根实例中 就可以使用了
const app =new Vue({
router
}).$mount('#app')
在vue-cli 中使用路由
1. 首先创建 .vue文件写相应的 组件啊 没有组件还玩什么路由 （嘿嘿嘿）
2. 在App.vue 中定义 <router-link> <router-view>
<router-link> 可以说是相当于<a>标签 跳转用的 比如想跳到那个组件
<router-link to="/home">点我去home溜达</router-link>
<router-view> 同样是必须的有的 因为没有它你的组件不知到渲染到哪里
3. 在src目录下新建一个router文件夹 在里面建一个 .js文件
// 首先引入vue vue-router
import Vue from "vue";
import VueRouter from "vue-router"
// 引入组件
import home from "../home/home"
import admin from "../home/admin"
// 告诉vue 使用 vue-router
Vue.use(VueRouter)
// 定义routes 路由组
const routes =[
{path:"/home",component:home}
{path:"/admin",component:admin}
]
// 定义路由的管理者 router
var router = new VueRouter({
base:'', // 路由路径的前缀,需要和 nginx 中的配置保持一致.
mode: 'history', // 切换路径模式，变成history模式
scrollBehavior: () => ({ y: 0 }),
routes //routes:routes 简写
})
// 最后将路由暴露出去 让其他地方使用
export default router
4. 把路由 注入到根实例中 在 main.js 中操作
// 引入vue 和 vue-router 不然也用不了啊
import Vue from "vue"
import VueRouter from "vue-router"
// 引入路由
import router from "./router/index"
new Vue({
el:"#app",
router,
render: h => h(App),
})
动态路由
<router-link to="/user/25">
{ path : "/user/:id", component : user }
嵌套路由
<router-link to="/home/user">
{
path::"/home",
component: home,
children:[
{ path:"/user", component:user }
]
}
命名路由
{
path: "/user/:id",
name:"user",
component:user
}
<router-link to = "user/25"> user </router-link>
<router-link :to = { name：＂user＂, params :{ userID : 25 }}> user </router-link>
／／ 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定
编程式导航 跳转
主要应用在按钮上 调用 router.push()方法
通过 this.$router.push("user") //就可以跳转到对应的组件
// 还可以 传值
this.$router.push({ name:user , params:{ code:2 }})
this.$route.params.code 接收值
知识点
最后 我来总结一下 一些有用的 和 不知道有用没用的知识点
meta : 根据 vue-router 中的 meta 动态设置 html 中 title 标签中的内容
{
path:'/updatePmsPsudoRoom',
name: 'updatePmsPsudoRoom',
component: updatePmsPsudoRoom,
meta: {
requireAuth: true, // 自定义属性
wrapper: true // 同上
title:首页
}
},
redirect 重定向
{
path:'/', //因为 程序启动时 第一个进入的就是 / 所以用重定向避免错误
name: 'default',
redirect: '/index'
},
网友评论