路由的概念
路由是根据不同的 url 地址展示不同的内容或页面
早期的路由都是后端直接根据 url 来 reload 页面实现的，即后端控制路由。
后来页面越来越复杂，服务器压力越来越大，随着 ajax（异步刷新技术） 的出现，页面实现非 reload 就能刷新数据，让前端也可以控制 url 自行管理，前端路由由此而生。
单页面应用的实现，就是因为前端路由
-
安装
cnpm i -S vue-router -
新建src/router/index.js
// 导入vue
import Vue from 'vue';
// 导入路由
import VueRouter from 'vue-router';
// 导入路由路径对应的组件
import Szc from '@/components/Szc';
// vue使用路由
Vue.use(VueRouter);
// 抛出路由的实例
export default new VueRouter({
routes: [
{
path: '/', // 链接
component: Szc // 组件模板，
}
]
});
- src/main.js
import Vue from 'vue';
import App from './App';
// 导入路由
import router from './router'
new Vue({
el: "#root",
router, // 挂载路由, 从而使得整个应用都有路由功能
render: h => h(App)
});
-
router-view 用于渲染匹配到的组件
-
router-link
是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址
注意：被选中的router-link将自动添加一个class属性值.router-link-active
to：导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/"
tag: 转为指定标签名
[首页] ：就是我们要显示给用户的导航名称
<router-link to="/">首页</router-link>
- 动态路由匹配
一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.
route.params
/user/:username | /user/evan | { username: 'evan' }
/user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: '123' }
.,/
```html
<div>User {{ $route.params.id }}</div>
- 通过<router-link> 标签中的to传参
<router-link :to="{name:'路由名称',params:{key:value}}">路由</router-link>
- name：就是我们在路由配置文件中起的name值。
另：命名路由就是用一个名称来标识一个路由，在定义路由的时候设置一个name属性即可。在router-link中也可以用路由的名字来链接到一个路由。
params：就是我们要传的参数，它也是对象形式，在对象里可以传递多个值。
最后用$route.params.username进行接收
- 路由的重定向
- redirect基本重定向
const routes = [
{ path: '/', redirect: '/goods'}
]
// 重定向的目标也可以是一个命名的路由
const routes = [
{ path: '/', redirect: { name: 'goods' }}
]
// 重定向时也可以传递参数
{
path:'/',
redirect:'/goods/:newsId/:userName'
}
- 通过别名进行重定向
// 定义路由的时候可以同时定义路由的别名
{ path: '/home',
component: Home,
alias:'/h'
}
可以直接使用router-link中的to属性，进行重定向
<router-link to="/h">home</router-link>
区别：
redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容
注意: 别名alias在path为'/'中，是不起作用的
编程式导航
router.push(location)
注意：在 Vue 实例内部，你可以通过 router.push
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
router.replace(location)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
声明式
<router-link :to="..." replace>
编程式
router.replace(...)
router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
- 嵌套路由
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
注意： 要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径
- 命名路由
给某个路由设置名称, 通过一个名称来标识一个路由
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user', //
component: User
}
]
})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})
- 命名视图
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
const router = new VueRouter({
routes: [
{
path: '/',
components: { // 多个组件
default: Foo,
a: Bar,
b: Baz
}
}
]
})
- 路由对象属性
$route.path
类型：string
字符串，对象当前路由的路径， 总是解析为绝对路径
$route.params
类型 ： object
一个key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象
route.query.user==1 ,如果没有查询参数，则是空对象
route.fullPath
类型 ：string
完成解析后的URL，包含查询参数和hash的完整路径
$route.matched
类型：Array<RouteRecord>
一个数组，包含当前路由所有嵌套路径片段的路有记录，路由记录就是routes配置数组中的对象副本（还包括children数组）
$route.name
当前路由的名称，如果有的话
$route.redirectedFrom
如果存在重定向，即为重定向来源的路由的名字
网友评论