VUE 之 路由 VueRouter
2024-09-08 11:06:00
1、VueRouter的安装
1.1、https://unpkg.com/vue-router/dist/vue-router.js下载安装。
1.2、<script src="./static/vue-router.js"></script>
2、VueRouter的使用
我们在使用Vue中的属性十，都可以通过$属性名拿到它所对应的对象
$route 拿到的是一个object对象，里边有所有的信息
$router 拿到的是一个VueRouter实例化的对象，里边有VueRouter的所有方法。
<script>
// 1. 在Vue根实例中使用，VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`
}; let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`
}; let Register = {
template: `
<div>
<h1>这是注册页面</h1>
</div>
`
}; let App = {
// 第四步
// router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
// 第五步
// router-view是页面内容的渲染出口
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`, }; // 2. 第二步实例化一个router对象
// 本质上是将路径和页面内容绑定了对应关系
let router = new VueRouter({
routes: [
{
path: '/',
component: Home,
},
{
path: '/login',
component: Login,
},
{
path: '/register',
component: Register,
}
]
}); new Vue({
el: "#app",
template: `<App/>`,
// 第三步，在根实例中注册router对象
router: router, # 固定写法router
components: {
App,
}
});
</script>
3、VueRouter的路由命名
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登录</router-link>
<router-link :to="{ name: 'register' }">注册</router-link> <router-view></router-view>
</div>
`,
}; # 在router-link中进行命名 ：to='{name:'xx'}'
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register,
}
]
});
4、VueRouter之参数
template: `
<div>
<router-link :to="{ name: 'home'}">首页</router-link>
<router-link :to="{ name: 'userParams', params: { userId: 1} }">登录</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link> <router-view></router-view>
</div>
`,
}; // 2. 第二步实例化一个router对象
// 本质上是将路径和页面内容绑定了对应关系
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// xxx/1 如果参数是这种样式，在template中使用params:{userId:1}
name: 'userParams',
path: '/user/:userId',
component: userParams,
},
{
// xxx/?userId=1 如果参数是带?xx=xx的形式，在template中使用query:{userId:2}
name: 'userQuery',
path: '/user',
component: userQuery,
}
]
});
5、VueRouter之子路由
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'courses',
path: '/courses',
component: Courses,
children: [ # 创一个children的数组，里边包含的是子路由的内容
{
path: 'lightcourses',
component: LightCourses
},
{
path: 'degreecourses',
component: DegreeCourses
},
]
},
]
});
6、VueRouter之子路由append （将子路由路径拼接到父级路由后边）
<script>
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>这是首页页面</h1>
</div>
`
}; let Courses = {
template: `
<div>
<h1>这是课程页面</h1>
<router-link to="lightcourses" append>轻课</router-link> # 在注册的课程标签下的两个子路由的a标签中 加入append,就可以将路径拼接到父级路由后边
<router-link to="degreecourses" append>学位课</router-link> <router-view></router-view>
</div>
`
}; let LightCourses = {
template: `
<div>
<h1>这是轻课页面</h1>
</div>
`
}; let DegreeCourses = {
template: `
<div>
<h1>这是学位课程页面</h1>
</div>
`
}; let App = {
template: `
<div>
<router-link :to="{ name: 'home' }" >首页</router-link>
<router-link :to="{ name: 'courses'} " >课程页面</router-link> <router-view></router-view>
</div>
`
}; let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'courses',
path: '/courses',
component: Courses,
children: [ # chlidren 是子路由与父级路由的关系
{
path: 'lightcourses',
component: LightCourses
},
{
path: 'degreecourses',
component: DegreeCourses
},
]
},
]
}); new Vue({
el: "#app",
template: `<App/>`,
components: {
App,
},
router: router,
}) </script>
不写append：
写append：
7、VueRouter之重定向(redirect)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login
},
{
name: 'pay',
path: '/pay',
redirect: '/login', # 哪里需要重定向直接加一个redirect：'/路径'
component: Pay,
},
]
});
8、VueRouter之钩子函数
<script>
// 1. 使用VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>这是首页页面</h1>
</div>
`
}; let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`
}; let Pay = {
template: `
<div>
<h1>这是支付页面</h1>
</div>
`
}; let App = {
// router-link会渲染成a标签，to会渲染成href
// router-view是内容的渲染出口
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登录</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link> <router-view></router-view>
</div>
`
}; // 2. 创建一个router对象
// 把a标签的锚点值和页面内容绑定了对应关系
let router = new VueRouter({
routes: [ # 固定写法routes：[数组]
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login
},
{
name: 'pay',
path: '/pay',
meta: { required_login: true }, # 固定写法用meta：{自定义变量名:true}
component: Pay,
},
]
}); // 通过router对象的beforeEach(function(to, from, next))
router.beforeEach(function (to, from, next) { # 三个参数：to 表示路由要访问的目的路径
console.log("to: ", to); from 表示从哪个路径访问跳转过来的，比如从登陆界面访问支付界面，from就是登陆界面的路径，to 就是支付的路径
console.log("from: ", from); next 表示接下来要去哪儿 ，next()如果里边没有参数，就表示接下来正常执行。
console.log("next: ", next);
if ( to.meta.required_login ) {
next('/login');
} else {
next();
}
}); new Vue({
el: "#app",
template: `<App/>`,
components: {
App,
},
// 在根实例中注册router对象
router: router,
}) </script>
9、VuRouter之去掉中间的那些多余的参数
let router = new VueRouter({
mode: 'history', # 只需要在router对象中加一个mode：'history',就可以去掉多余的参数，效果如下
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login
},
{
name: 'pay',
path: '/pay',
meta: { required_login: true },
component: Pay,
},
]
});
最新文章
- 利用sqlmap进行mysql提权的小方法(win与liunx通用）
- struct和union分析实例
- 【转】Eclipse中一键调用javah生成jni的头文件
- 关闭Linux里边的selinux
- JavaScript中的作用域和闭包
- 系统后台图表生成文档说明-javascript
- 28.Linux-IIC驱动(详解)
- php使用rc4加密算法
- PHP的性能优化方法总结
- Go 语言循环语句
- C#版(击败100.00%的提交) - Leetcode 744. 寻找比目标字母大的最小字母 - 题解
- 简单配置jena在eclipse的开发环境
- 2.启动MySql服务
- 腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
- aspose导出excel文件
- 网络工程实训_4RIP路由（动态路由）
- 基于spring boot admin 做监控的一些问题记录
- wins 软件安装
- 从jvm运行机制来分析 String对象负值
- 各种 Python 库/模块/工具