VUE 之 路由 VueRouter
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, }, ] });
