个人自学前端31-Vue8-单页应用SPA，路由Vue Router
作者：互联网
目录
一. 单页应用SPA
传统的网页或者App会有很多页面
传统的网页都是开发很多的html页面来充当分页
Vue框架就不好实现多html页面的网页应用
Vue的路由用于实现单页应用
单页应用 => SPA => single page appliation => 一个网站只会一个html
单页应用如何开发别的单页？
单页应用的分页统统通过Vue组件来开发 => 一个页面对应一个组件
因此网站页面的切换 => Vue组件的切换 => 动态组件切换
单页应用(App应用)相比传统的网站项目的优缺点
- 优点:
利于开发.
分页加载不需要请求服务器,响应快.切换平滑,用户体验好. - 缺点:
对seo优化不友好.(分页是组件,切换分页,url相当于没跳转)
seo(PC): 搜索引擎优化,提高网站排名.(不算前端技术,运营的技术)
首屏加载比较慢.
二. 路由
vue路由需要使用一个vue-router的插件来实现。
vue-router是vue的插件,因此需要在引入Vue之后引入
4XX的版本是为Vue3的路由版本.Vue2需要使用3xx的版本.
路由的写法：
- 实例化路由.(写路由选项 => 路由组件和路由路径的对应关系)
- 挂载路由实例
- 挂载路由视图(router-view 这是一个动态组件,会自动切换成你的路由组件)
路由组件切换的核心逻辑 => 路径改变驱动路由组件切换.
<script>
const Home = {
template: `
<div>
<h3>首页</h3>
</div>
`
}
const News = {
template: `
<div>
<h3>新闻</h3>
</div>
`
}
const Sport = {
template: `
<div>
<h3>体育</h3>
</div>
`
}
// 实例化路由
const router = new VueRouter({
// 路由组件和路由路径的对应关系 => 路由选项
routes: [
{
// 路由路径
path: '/home',
// 路由组件
component: Home
}, {
// 路由路径
path: '/news',
// 路由组件
component: News
}, {
// 路由路径
path: '/sport',
// 路由组件
component: Sport
}
]
})
const App = {
template: `
<div>
<a href='#home'>首页</a>
<a href='#news'>新闻</a>
<a href='#sport'>体育</a>
<router-view />
</div>
`
};
new Vue({
render: h => h(App),
// 挂载路由
router
}).$mount('#app');
</script>
1. router-link
可以使用router-link内置组件来代替a标签.
router-link最终渲染时,还是被渲染成a标签.
const App = {
template: `
<div>
<router-link to='/home'>首页</router-link>
<router-link to='/news'>新闻</router-link>
<router-link to='/sport'>体育</router-link>
<router-view />
</div>
`
};
2. 重定向 redirect
const router = new VueRouter({
routes: [
{
// 当你的路径是/时,把路径变成/home
path: '/',
// 重定向到home
redirect: '/home'
}
]
})
3. 编程式导航
挂载理由实例之后,任何组件都可以通过$router来访问到这个路由实例.
路由实例方法push可以实现跳转.参数是:
- 字符串的path.
- 纯对象.
路由实例方法replace也可以实现跳转.参数和push的一致.
和push的区别是不会把当前页面添加到页面栈内.
<script>
const App = {
template: `
<div>
<button @click='toPage("home")'>首页</button>
<button @click='toPage("news")'>新闻</button>
<button @click='toPage("sport")'>体育</button>
<router-view />
</div>
`,
methods: {
// 编程式导航
toPage(path) {
// location.hash = '#/' + path
// 路由实例.
// console.log(this.$router);
// Vue路由的跳转方法。
// this.$router.push('/' + path);
// this.$router.push('/home');
// 传纯对象.路径选项path指定跳转的路径
// this.$router.push({ path: '/' + path});
// 传纯对象,选项name是路由选项的name命名(必须保证路由选项有命名)
// this.$router.push({ name: path });
// 不会把当前页面加入到页面栈
// this.$router.replace({ name: path });
// 前进
// this.$router.forward();
// 后退
// this.$router.back();
// 指定跳转
// this.$router.go(1);
}
}
};
</script>
三. 嵌套路由
嵌套路由 => 路由组件视图内又有另一个路由视图
<script>
const Home = {
template: `
<div>
<h3>首页</h3>
<router-link to='/home/phone'>手机</router-link>
<router-link to='/home/computer'>电脑</router-link>
<router-link to='/home/pad'>ipad</router-link>
<router-view />
</div>
`
}
const News = {
template: `<div><h3>新闻</h3></div>`
}
const Sport = {
template: `<div><h3>体育</h3></div>`
}
const Phone = {
template: `<h3>手机</h3>`
}
const Computer = {
template: `<h3>电脑</h3>`
}
const Pad = {
template: `<h3>ipad平板</h3>`
}
// 子路由
const childRoutes = [
{
path: '/home/phone',
component: Phone,
name: 'phone'
}, {
path: '/home/computer',
component: Computer,
name: 'computer'
}, {
path: '/home/pad',
component: Pad,
name: 'pad'
}, {
path: '/',
redirect: '/home/phone'
}
];
// 父路由
const routes = {
// 路由组件和路由路径的对应关系 => 路由选项
routes: [
{
// 路由路径
path: '/',
// 路由组件
component: Home,
// Home组件内的子路由,需要配置children选项
children: childRoutes
}, {
path: '/news',
component: News
}, {
path: '/sport',
component: Sport
}
]
}
// 实例化路由
const router = new VueRouter(routes)
const App = {
template: `
<div>
<router-link to='/'>首页</router-link>
<router-link to='/news'>新闻</router-link>
<router-link to='/sport'>体育</router-link>
<router-view />
</div>
`
};
new Vue({
render: h => h(App),
// 挂载路由
router
}).$mount('#app');
</script>
1.嵌套路由的路径写法
// 子路由
const childRoutes = [
{
path: 'phone',
component: Phone,
name: 'phone'
}, {
path: 'computer',
component: Computer,
name: 'computer'
}, {
path: 'pad',
component: Pad,
name: 'pad'
}
];
// 父路由
const routes = {
// 路由组件和路由路径的对应关系 => 路由选项
routes: [
{
// 路由路径
path: '/home',
// 路由组件
component: Home,
// Home组件内的子路由,需要配置children选项
children: childRoutes,
// path等于/home时,重定向到'/home/phone'
redirect: '/home/phone'
}, {
path: '/news',
component: News
}, {
path: '/sport',
component: Sport
}, {
path: '/',
redirect: '/home'
}
]
}
2.嵌套路由的跳转问题
const Login = {
template: `
<div id='login'>
<input type="text">
<input type="password">
<button @click='toPage'>登录</button>
</div>
`,
methods: {
toPage() {
// this.$router.push('/home');
// this.$router.push('/home/news');
// this.$router.push('/home/music');
// this.$router.push({ name: 'home' });
// 如果跳转到二级路由组件,name需要写二级路由的name.
// this.$router.push({ name: 'music' });
}
}
}
3.路由的组件关系
Home和News和Sport这些路由组件都是App的子组件
App可以通过props给这些路由组件传递数据,以及实现状态管理.
<script>
const Home = {
template: `
<div>
<h3>首页---{{count}}</h3>
<input type='text' />
</div>
`,
props: ['count']
}
const News = {
template: `
<div>
<h3>新闻---{{count}}</h3>
</div>
`,
props: ['count']
}
const Sport = {
template: `
<div>
<h3>体育---{{count}}</h3>
<input type='text' />
</div>
`,
props: ['count']
}
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
}, {
path: '/news',
component: News
}, {
path: '/sport',
component: Sport,
}, {
// 当你的路径是/时,把路径变成/home
path: '/',
// 重定向到home
redirect: '/home'
}
]
});
const App = {
template: `
<div>
<router-link to='/home'>首页</router-link>
<router-link to='/news'>新闻</router-link>
<router-link to='/sport'>体育</router-link>
<button @click='count++'>count++</button>
<router-view :count='count' />
</div>
`,
data() {
return {
count: 0
}
}
};
new Vue({
render: h => h(App),
// 挂载路由
router
}).$mount('#app');
</script>
四.缓存跳转路由的组件
// activated => 激活,显示
// deactivated => 失活,隐藏
<keep-alive include='缓存的组件' exclude='排除的组件'>
<router-view />
</keep-alive>
标签：Vue,const,home,单页,31,router,组件,path,路由 来源： https://www.cnblogs.com/DarkCrow/p/15359117.html