Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
Vue Router的安装使用 :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div id="d1"></div>
<script>
//第一步在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-link :to="{name: ‘home‘}">首页</router-link>
<router-link :to="{name: ‘login‘}">登录</router-link>
<router-link :to="{name: ‘register‘}">注册</router-link>
<router-view></router-view>-->
<!--params是无参数名的传参关键字
query是有参数名的传参关键字
<router-link :to="{name: ‘home‘}">首页</router-link>
<router-link :to="{name: ‘login‘,params:{loginId: 1}}">登录</router-link>
<router-link :to="{name: ‘register‘,query:{reg: 1}}">注册</router-link>
<router-view></router-view>-->
</div>
`,
};
//第二部实例化一个router对象
//本质上是将路径和页面内容绑定一个对应的关系
// 在真实的场景中，可有以下路径形式
// user/1;
// user/?userId=1;
let router = new VueRouter({
mode: "history",
routes: [
{
name: "home",
path: "/",
component: Home,
},
{
//xxx/参数
name: "login",
path: "/login/:loginId",
component: Login
},
{
//xxx/?参数名=参数值
name: "register",
path: "/register",
component: Register
}
]
});
new Vue({
el: "#d1",
template: `<App/>`,
//第三部在根实例对象中注册router对象
router: router,
components: {
App,
}
})
</script>
</body>
</html>
Vue Router子路由 :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div id="d1"></div>
<script>
Vue.use(VueRouter);
let Home = {
template: `<div><h1>这是主页</h1></div>`
};
let Course = {
template: `
<div>
<h2>课程页面</h2>
<router-link :to="{name: ‘python‘}" append>派森</router-link>
<router-link :to="{name: ‘linux‘}">linux</router-link>
<router-view></router-view>
</div>`,
};
let Python = {
template: `<div><h3>人生苦短,我用派森</h3></div>`
};
let Linux = {
template: `<div><h3>不会linux岂不是咸鱼</h3></div>`
};
let Class = {
template: `
<div>
<h1>班级页面</h1>
<router-link :to="{name: ‘one‘}">一班</router-link>
<router-link :to="{name: ‘two‘}">二班</router-link>
<router-view></router-view>
</div>`
};
let One = {
template: `
<div>
<router-link :to="{name: ‘red‘}">一班啊</router-link>
</div>`
};
let Two = {
template: `<div><h3>二班啊</h3></div>`
};
let router = new VueRouter({
routes: [
{
name: "home",
path: "/",
component: Home
},
{
name: "course",
path: "/course",
component: Course,
children: [
{
name: "python",
path: "python",
component: Python
},
{
//使用append自动添加前路径的话.子路径名前不能有" / "
name: "linux",
path: "linux",
component: Linux
},
{
name: "red",
path: "red",
//重定向页面
redirect: "/",
}
]
},
{
name: "class",
path: "/class",
component: Class,
children: [
{
name: "one",
path: "/class/one",
component: One
},
{
name: "two",
path: "/class/two",
component: Two
}
]
},
]
});
let App = {
template:`
<div>
<router-link :to="{name: ‘home‘}">首页</router-link>
<router-link :to="{name: ‘course‘}">课程</router-link>
<router-link :to="{name: ‘class‘}">班级</router-link>
<router-view></router-view>
</div>
`,
};
new Vue({
el: "#d1",
template:`<App/>`,
components:{
App,
},
router: router
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/dong-/p/9942890.html
时间： 2024-10-10 15:29:13