路由是什么
路由，其实就是指向，当我点击home导航按钮，页面显示home的内容，如果点击的是about，就切换成about的内容。
安装
1、直接引入包
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2、npm下载
如果在一个模块化工程中使用它，必须要通过 Vue.use()明确的安装路由功能：在你的项目的src文件夹下的main.js文件内写入：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
具体用法
1、基本路由
<div id="app">
<div>
<router-link to="/home">主页</router-link> // 默认会被渲染成一个a标签，to属性为我们定义的路由
<router-link to="/user" tag='li'>用户页</router-link> // 如果不想渲染成a，可以在tag选项写其他标签
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = { // 定义组件
template: '<p>我是主页的内容~</p>'
}
var User = {
template: '<p>我是用户的内容~</p>'
}
const router = new VueRouter({ // 定义路由并配置路由
routes: [
{
path: '*', // 没有点击按钮或者填写路径错误默认跳转到 /home
redirect: '/home' // 这里就是路由的重定向
},
{
path: '/home', // 路径
component: Home // 组件
},
{
path: '/user',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router // 注入路由
})
</script>
效果：
点击主页按钮会显示主页的内容，点击用户按钮会显示用户的内容。
2、动态路由
上面我们定义的路由，都是严格匹配的，只有router-link 中的to属性和 js 中一条路由route中 path 一模一样，才能显示相应的组件. 但有时现实却不是这样的，当我们去访问网站并登录成功后，它会显示 欢迎你，+ 你的名字。不同的用户登录， 只是显示“你的名字” 部分不同，其它部分是一样的。这就表示，它是一个组件，假设是user组件。不同的用户（就是用户的id不同），它都会导航到同一个user 组件中。这样我们在配置路由的时候，就不能写死, 就是路由中的path属性，不能写死，那要怎么设置? 导航到 user 组件，路径中肯定有user, id 不同，那就给路径一个动态部分来匹配不同的id. 在vue-router中，动态部分 以 : 开头，那么路径就变成了 /user/:id, 这条路由就可以这么写： { path:"/user/:id", component: user }
<div id="app">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/user/123">用户123</router-link>
<router-link to="/user/456">用户456</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template: '<p>我是主页的内容~</p>'
}
var User = {
template: '<p>我是用户的内容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/user/:id',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
这时在页面中点击user123 和user456, 可以看到它们都导航到user组件，配置正确。
3、嵌套路由
嵌套路由，主要是由我们的页面结构所决定的。当我们进入到user页面的时候，它下面还有分类，登陆页面，注册页面，这时，用法如下：
<div id="app">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script type="text/x-template" id="user">
<div>
<div>
<router-link to="/user/login">登陆</router-link>
<router-link to="/user/reg">注册</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
</script>
<script>
var Home = {
template: '<p>我是主页的内容~</p>'
}
var User = {
template: '#user'
}
var Login = {
template: '<p>我是登陆页的内容~</p>'
}
var Reg = {
template: '<p>我是注册页的内容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/user',
component: User,
children: [ // 书写子路由
{
path: 'login',
component: Login
},
{
path: 'reg',
component: Reg
}
]
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
效果：
4、命名路由
有时我们通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
<div id="app">
<div>
<router-link :to="{name: 'home'}">主页</router-link>
<router-link :to="{name: 'user'}">用户页</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template: '<p>我是主页的内容~</p>'
}
var User = {
template: '<p>我是用户的内容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '*',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/user',
name: 'user',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
5、路由传参
5.1、query
<div id="app">
<div>
<router-link to="/home?name=tom&age=24">主页</router-link> // 参数在这里书写
<router-link to="/user">用户页</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template: '<p>我是主页的内容~---{{$route.query}}</p>' // 通过 $route.query 获取
}
var User = {
template: '<p>我是用户的内容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/user',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
5.2、 params
<div id="app">
<div>
<router-link to="/home/jack/25/sing">主页</router-link> // 这里直接写值，不用写参数名
<router-link to="/user">用户页</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template: '<p>我是主页的内容~---{{$route.params}}</p>' // 通过 $route.params 获取
}
var User = {
template: '<p>我是用户的内容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '/home/:name/:age/:likes', // 这里定义参数名
component: Home
},
{
path: '/user',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
效果：
ps.以上俩种差异：如果要隐藏参数用params，如果强制刷新不被清除用query
6、编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
6.1、router-push()
router.push(location)
<div id="app">
<div>
<button @click="push">push</button> // 定义方法
<router-link to="/home">主页</router-link>
<router-link to="/user">用户页</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template: '<p>我是主页的内容~</p>'
}
var User = {
template: '<p>我是用户的内容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/user',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router,
methods: {
push: function () {
router.push( 'home' );
}
}
})
</script>
// 1、字符串
router.push( 'home' ); // 这里的字符串是路径，而不是name，不用加/
// 2、对象
router.push( {path: '/home'} );
// 3、命名的路由
router.push({name: 'home',params: {color: 'green'}}); // 这里用name，不能用path
// 4、带查询参数
router.push({path: '/home',query: {age: 25}});
6.2、router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
router.go(1);
6.3、router.replace()
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.replace('home');
网友评论