vue 路由id_vue路由详解
自己看vue文档，难免有些地方不懂，自己整理一下，主要是vue-router具体实现的操作步骤。
安装
直接下载/CDN
Unpkg.com提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像
在 Vue 后面加载 vue-router，它会自动安装的：
NPM
npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此(手动安装)。
#基础
开始
HTML:
Hello App!
Go to Foo
Go to Bar
显示的当前路由的内容
实现路由的跳转
JavaScript：
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: '
const Bar = { template: '
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
当 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active
步骤：
1.在main.js中引入vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
2.在main.js中使用这个router插件
Vue.use(VueRouter)
3.生成这个router实例
export default new Router(){
routes:[
{
path:'/',
name:'home',
component:Home
},{
path:'/list',
name:'list',
component:List
}
]
}
4.在index.js中把路由实例传递给Vue根组件
import router from './router'
new Vue({
el:'#app',
router,
template:'',
components:{ APP }
})
静态路由
静态配置的 ---> import ....
固定路径路由的配置
{
path:'/',
name:'home',
component:Home
},{
path:'/list',
name:'list',
component:List
}
动态路由匹配
只有动态路由可以做到分页的效果
{
path:'/list/:id',
name:'list',
component:List
}
list.vue
return {
title:""
}
}
export default{
mounted(){
if(this.$route.params.id == 1){
//请求第一页数据
this.title="第一页"
}
if(this.$route.params.id == 2){
//请求第二页数据
this.title="第二页"
}
}
}
接收多个个参数
index.js
{
path:'/list/:id/name/:name',
name:'list',
component:List
}
list.vue
return {
title:"",
name:""
}
}
export default{
mounted(){
//结构赋值写法
const {name,id} = this.$route.params;
this.name = name;
//this.name = this.$route.params.name;
if(this.$route.params.id == 1){
//请求第一页数据
this.title="第一页"
}
if(this.$route.params.id == 2){
//请求第二页数据
this.title="第二页"
}
}
}
传递不同参数 显示不同数据
项目应用：详情页
watch 响应路由参数的变化
监听路由的变化
watch:{
'$route'(to,from){
this.name = to.params.name;
}
}
在2.2中引入守卫( beforeRouteUpdate)
守卫 --> 钩子函数
beforeRouteUpdate (to, from, next) {
this.name = to.params.name;
next();//走到下一个钩子
}
嵌套路由
头部左侧不变只有内容区改变 这样的需求可以用嵌套路由来做
{
path:'/list',
name:'list',
component:List,
childeren:[{
path:'a',
component:A
}]
}
再引入一个A组件 A.vue
在list.vue组件中通过，显示A组件的内容
在一个非app组件里面写显示的是当前路由下子组件的内容
编程式的导航
除了来创建a标签来定义导航链接，还可以借助router的实例方法
router.push(location,onCompelte?,onAbort?)
在Vue实例内部，可以通过$route访问路由实例，因此你可以调用this.$route.push
想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。
当你点击时，这个方法会在内部调用，所以说，
点击 ---> 声明式
等同于
调用router.push(...) --->编程式
可以在Header组件中跳转到list中
export defalut{
methods:{
handleClick(){
this.$router.push({
name:'list'
})
}
}
}
可以在Header组件中跳转到list/123中
export defalut{
methods:{
handleClick(){
this.$router.push({
//一种方式
//path:'/list/123',
//2种方式
name:'list'
params:{
id:123
}
})
}
}
}
使用router.push 或者 router.replace 里面都不能让path和params同时存在
//字符串
router.push('home');
//对象
router.push({path:'home'})
//命名的路由
router.push({name:'user',params:{userId:123}})
//带查询参数，变成/register?plan=private
router.push({path:'register',query:{plan:'private'}})
router.replace
和router.push唯一的不同就是，不会向history添加新纪录，而是替换掉当前的history记录不能返回
router.go
命名路由
定义名字跳转
命名视图
var app = new VueRouter({
routers:[{
path:'/',
componens:{
defaults:Foo,
a:Bar,
b:Baz
}
}]
})
重定向和别名
访问/abc 重定向到/根路径
{
path:'/abc',
redirect:'/'
}
访问/bieming 实际上还是访问的根路径
{
path:'/',
name:'home',
component:Home,
alias:'/bieming'
}
路由组件传参
解耦
动态路由传id
{
path:'/list/:id',
name:'list',
component:List,
props:true
}
在list.vue中
可以直接通过props['id']获取数据
props['id']
}
对象模式
props:{name:"dell"}
一般是写死的字符串静态数据
函数模式
index.js
{
path:'/list/:id',
name:'list',
component:List,
props : (route)=>({
query:route.query.q
id:route.params.id
})
}
list.vue
props['query','id']
}
我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1rr2npw3kickj