Vue-router学习指南
日记：本文按照vue-router官网的知识结合例子进行分析和讲解，搭建工具（vue-cli,vue-router）
基本搭建
-
安装vue-cli
npm install -g vue-cli -
通过webpack搭建
// 初始化项目 vue init webpack Your-projectName // 安装依赖 npm i // 启动项目 npm run dev -
项目结构
目录结构.png
搭建解析
-
route下面的index（一个主观的认识，之后会有详细的解释和干货）
// 引入依赖 import Vue from 'vue' import Router from 'vue-router' // 引入组件 import DemoAbout from '@/components/DemoAbout' import DemoContact from '@/components/DemoContact' import DemoHome from '@/components/DemoHome' import DemoContactChild1 from '@/components/DemoContactChild1' //vue使用vue-router Vue.use(Router) // 导出内容给main.js使用 export default new Router ({ // routes数组,里面是每一个路由配置 routes: [ { path: '/', name: 'Home', component: DemoHome }, { path: '/contact/:id?', name: 'Contact', component: DemoContact, children: [ { path: 'hello', component: DemoContactChild1 } ] }, { path: '/about', name: 'About', component: DemoAbout }, ] })-
解析
-
path: 对应的路径。name: 路由的命名。component: 对应的组件 -
上面的@是怎么来的呢？通过
webpack的别名alias来定义目录// 找到build下面的webpack.base.conf.js配置 21行 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, // 找到resolve 6行 function resolve (dir) { return path.join(__dirname, '..', dir) } // 所以得到@是运行文件下的src的简写
-
-
路由解析
-
简单的路由配置
//组件 const Foo = {template: '<div>Foo</div>'}; const Bar = {template: '<div>Bar</div>'}; // 先来一个简单的路由配置 const routes = [ {path: '/foo', component: Foo}, { path: '/bar', component: Bar } ] // 我们需要实例化routes const route = new Router({ routers }) // 然后我们需要挂载实例并通过route组件路由，然后就可以全局使用了 const app = new Vue({ el: '#app', route })通过上面的例子，我们已经对路由有了一个大致的认识，接下来介绍动态路由配置和嵌套路由
-
动态路由配置和嵌套路由
动态设置路由： 以冒号开头。
{ path: '/user/:id', component: User }通过{{$route.params.id}}或者this.$route.params.id获取值。// 如果学习了express.js的部分就知道，对应路由的配置是可以通过正则和动态路由参数来传递 { path: '/contact/:id?', //正则匹配，可以传递id也可以不传id name: 'Contact', component: DemoContact, } <div>{{$route.params.id}}</div>高级路由配置
模式 匹配路径 $route.params /user/:username /user/evan { username: 'evan' } /user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: 123 } /user/:username/post/:id? /user/evan/post { username: 'evan' } 路由嵌套：页面通过
<router-view></router-view>实现页面的显示路由，我们在路由中通过children来配置子路由单元。通过页面的router-view来展示相应的子路由<! --我们在DemoContact中配置router-view --> <template> <div id="contact"> <h2>this is contact</h2> <!--设置子路由配置--> <router-view></router-view> </div> </template>// 通过children子元素来配置相应的子路由单元 routes: [ { path: '/contact/:id', name: 'Contact', component: DemoContact, children: [ { path: 'hello', component: DemoContactChild1 } ] }, ]注意： 由于带有
/就是目录的根目录，所以我们在配置子路由的时候不要写成/hello，否则就不会配置相应的路径。
-
编程式路由
需求：如果我们需要在组建的js部分跳转页面怎么弄？
在html模板中，我们可以通过
router-link来显示页面路由的跳转，在js模板中，我们则需要通过router.push()来实现-
router.push(location) 如果不是绝对目录就会替换当前路由的最后一个路径配置
// 字符串跳转path // 当前页面是http://localhost:8080/#/contact router.push('home') //http://localhost:8080/#/about // 当前页面是http://localhost:8080/#/contact/600 router.push('home') // http://localhost:8080/#/about router.push('/home') //http://localhost:8080/#/about // 对象 router.push({ path: 'home' }) //路由的命名 router.push({ name: 'user', params: { id: 123 }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) //js模板中使用 this.$route.push() this.$router.push({name: 'Contact',params: {id: 6000}}) //注意带参数。一定是name特别注意：当我们需要传递
params的时候，一定是通过name来实现页面的跳转，不能通过path。声明式 编程式 <router-link :to="..."> router.push(...)
-
-
命令路由
有时候，我们需要通过一个简单的名字来实现跳转，这样我们可以在实例化路由的时候，通过
name，来实现跳转和传参。// 通过name来实例化路由配置 const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })跳转通过
name来定义的路由配置<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>代码js调用路由配置
this.$router.push({name: 'user',params: {userId: 123}})上述2中方式都会把路由导航到
name: user相对应的路由配置/user/123
- 命名视图
如果你想一个页面同时展示多个视图，而不是嵌套展示。例如：一个布局，有左边栏（sidebar）和 main(主内容)2个视图。这个时候命名视图就起到作用了，你可以在页面中拥有多个单独命名的视图，而不是只有一个单独的视图出口。如果
router-view没有设置名称，则默认的是default
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view one" name="b"></router-view>
一个视图使用一个组件渲染，如果对于同一个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
所以当我们浏览器访问根目录的时候，会渲染三个视图，分别对应三个组件。
- 重定向和别名
重定向：指的是当我们访问一个路由的时候，需要把这个路由重新定位到一个新的路由，不使用原来的组件
别名： 当我们访问一个路由的时候，给它起一个小名，当我们访问这个小名的时候，还是会跳到那个路由。
重定向
重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
const router = new VueRouter({
routes: [
{
path: '/a',
redirect: '/b',
component: '...'
}
]
})
重定向的目标也可以是一个命名空间的路由
const router = new VueRouter({
routes: [
{
path: '/a',
redirect: {name: 'foo'}
}
]
})
甚至是一个方法，动态返回重定向目标
别名
『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
上面对应的路由配置为：
const route = new VueRouter({
routes: [
{
path: '/a',
component: A,
alias: '/b'
}
]
})
网友评论